<!--
/**
 * SG3L RAG智能问答系统 - 主页面
 * 
 * 功能说明：
 * 1. 混合模式问答：支持纯文本、图片OCR、文档上传的智能问答
 * 2. 用户认证：登录/注册/退出功能，支持微信小程序和H5端
 * 3. 会话管理：创建、删除、切换对话会话
 * 4. 收藏功能：收藏/取消收藏对话内容
 * 5. 流式响应：实时显示AI回答内容
 * 6. 主题切换：支持明暗主题模式
 * 
 * 技术栈：
 * - UniApp Vue3 Composition API
 * - Server-Sent Events (SSE) 流式通信
 * - 文件上传
 * - localStorage 本地存储
 */
-->
<template>
	<view 
		class="app-container" 
		:class="'theme-' + state.currentTheme"
		@touchstart="handleTouchStart"
		@touchend="handleTouchEnd"
		@tap="handleContainerClick"
	>
		<!-- 侧边栏遮罩 -->
		<view 
			v-if="state.showSidebar" 
			class="sidebar-overlay" 
			@tap="closeSidebar"
		></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left">
				<button 
					v-if="state.messages.length > 0" 
					class="app-back-btn" 
					@tap="exitSession"
				>←</button>
				<text class="app-title">SG3L</text>
			</view>
			<view class="nav-right">
				<!-- 未登录状态 -->
				<view v-if="!state.isLoggedIn" class="login-section">
					<button class="login-btn" @tap="goToLogin">登录</button>
				</view>
				<!-- 已登录状态 -->
				<view v-else class="user-section" @tap.stop="toggleUserMenu">
					<image class="user-avatar" :src="userAvatar" mode="aspectFill" @tap.stop="goToProfile"></image>
					<text class="username">{{ state.userInfo.username }}</text>
					<text class="dropdown-arrow" :class="{ 'rotated': state.showUserMenu }">▼</text>
				</view>
				
				<!-- 用户下拉菜单 -->
				<view v-if="state.showUserMenu" class="user-dropdown" @tap.stop>
					<view class="dropdown-header">
						<image class="dropdown-avatar" :src="userAvatar" mode="aspectFill"></image>
						<view class="dropdown-user-info">
							<text class="dropdown-username">{{ state.userInfo.username }}</text>
						</view>
					</view>
					
					<!-- 主要功能区域 -->
					<view class="dropdown-main">
						<!-- 第一行 -->
						<view class="dropdown-row">
							<view class="dropdown-item-card" @tap="openThemeModal">
								<view class="card-icon">🌓</view>
								<text class="card-text">主题模式</text>
								<text class="card-badge">{{ getThemeName() }}</text>
							</view>
						</view>
						
						<!-- 第二行 -->
						<view class="dropdown-row">
							<view class="dropdown-item-card" @tap="goToFavorites">
								<view class="card-icon">💖</view>
								<text class="card-text">我的收藏</text>
							</view>
						</view>
						
						<!-- 退出登录 -->
						<view class="dropdown-row">
							<view class="dropdown-item-card logout-card" @tap="logout">
								<view class="card-icon">🚪</view>
								<text class="card-text">退出登录</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 侧边栏 -->
		<view class="sidebar" :class="{ 'sidebar-collapsed': !state.showSidebar }">
			<!-- 侧边栏头部 -->
			<view class="sidebar-header">
			   <view style="flex:1;display:flex;align-items:center;">
				   <text class="app-title" v-if="state.showSidebar">SG3L</text>
			   </view>
			   <view class="sidebar-toggle-btn" @tap="toggleSidebar">
				   <text class="toggle-icon">{{ state.showSidebar ? '←' : '→' }}</text>
			   </view>
			</view>
			
			<!-- 侧边栏内容 -->
			<view class="sidebar-content" v-if="state.showSidebar">
				<!-- 历史记录区域 -->
				<view  class="history-section">
					<view class="section-title">
						<text class="title-text">最近对话</text>
					</view>
					
					<scroll-view class="history-list" scroll-y="true">
						<view v-if="state.chatHistory.length === 0" class="empty-history">
							<text class="empty-text">暂无历史记录</text>
						</view>
						<view v-else>
							<view 
								v-for="(chat, index) in state.chatHistory" 
								:key="chat.id"
								class="history-item"
								:class="{ 'active': state.currentChatId === chat.id }"
								@tap="loadChat(chat.id)"
							>
								<text class="history-title">{{ chat.title || '未命名对话' }}</text>
								<view class="history-actions">
									<button class="favorite-chat-btn" @tap.stop="favoriteChat(chat)">
										<text class="favorite-icon">{{ isConversationFavorited(chat.id) ? '❤️' : '🤍' }}</text>
									</button>
									<button class="delete-chat-btn" @tap.stop="deleteChat(chat.id)">
										<text class="delete-icon">✕</text>
									</button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content" :class="{ 'input-focused': state.isInputFocused, 'has-messages': state.messages.length > 0 }">
			<!-- 欢迎区域 -->
			<view class="welcome-section" v-if="state.messages.length === 0 && !state.isInputFocused && !state.inputMessage.trim()">
				<view class="welcome-icon">🤖</view>
				<text class="welcome-title">您好，我是您的AI助手</text>
				<text class="welcome-subtitle">我可以帮您回答问题、检索文档、提供智能建议</text>
			</view>
			
			<!-- 对话消息列表 -->
			<view class="messages-container" v-if="state.messages.length > 0">
				<scroll-view 
					class="messages-list" 
					scroll-y="true" 
					:scroll-top="state.scrollTop"
					:enhanced="true"
					:bounces="true"
					:scroll-into-view="state.scrollIntoView"
					:enable-back-to-top="true"
					:scroll-with-animation="true"
				>
					<view v-for="(message, index) in state.messages" :key="index" :id="'message-' + index" class="message-item">
						<!-- 用户消息 -->
						<view v-if="message.type === 'user'" class="user-message">
							<!-- 用户消息外部的复制按钮 - 放在左边 -->
							<view class="external-action-btn copy-to-input-external" @tap="copyToInput(message.content)">
								<view class="external-action-icon">↩</view>
							</view>
							<view class="message-content user-content" :class="{ 'short-message': message.content.length < 20 }">
								<text class="message-text" :selectable="true">{{ message.content }}</text>
							</view>
						</view>
						
						<!-- AI消息 -->
						<view v-else class="ai-message">
							<view class="message-content ai-content" :class="{ 'short-message': message.content.length < 30 }">
								<rich-text 
									class="message-text markdown-content" 
									:nodes="renderMarkdown(message.content)"
									:selectable="true"
								></rich-text>
								<view v-if="!message.loading" class="message-divider"></view>
								<view v-if="!message.loading" class="message-actions">
									<view class="action-btn copy-btn" @tap="copyContent(message.content)">
										<view class="action-icon">⎘</view>
									</view>
									<!-- <view v-if="state.isLoggedIn" 
										  class="action-btn favorite-btn" 
										  @tap="addToFavorites(message)"
										  :class="{ 'favorited': isCurrentChatFavorited() }">
										<view class="action-icon">{{ isCurrentChatFavorited() ? '💖' : '🤍' }}</view>
									</view> -->
								</view>
								<view v-if="message.loading" class="typing-indicator">
									<text class="typing-dot">●</text>
									<text class="typing-dot">●</text>
									<text class="typing-dot">●</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 对话输入区域 -->
			<view class="chat-section" :class="{ 'bottom-fixed': state.isInputFocused || state.messages.length > 0 }">
				<view class="input-container">
					<!-- 主输入框区域 -->
					<view class="input-wrapper">
						<textarea 
							class="chat-input" 
							v-model="state.inputMessage"
							:placeholder="inputPlaceholder"
							confirm-type="send"
							@confirm="sendMessage"
							@focus="handleInputFocus"
							@blur="handleInputBlur"
							@input="handleInput"
							:auto-height="true"
							:show-confirm-bar="false"
							:maxlength="2000"
						/>
						<button 
							class="send-button-inline" 
							@tap="sendMessage"
							:disabled="!state.inputMessage.trim() || state.isSending"
							:class="{ 
								'active': state.inputMessage.trim() && !state.isSending,
								'sending': state.isSending
							}"
						>
							<text v-if="state.isSending">⏳</text>
							<text v-else>➤</text>
						</button>
					</view>
					
					<!-- 功能按钮区域 -->
					<view class="function-buttons-row">
						<view class="function-btn-compact upload-image-btn" @tap="uploadImage">
							<view class="function-icon-compact">�</view>
							<text class="function-text">图片</text>
						</view>
						<view class="function-btn-compact upload-file-btn" @tap="uploadFile">
							<view class="function-icon-compact">�</view>
							<text class="function-text">文件</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主题选择弹窗 -->
		<view v-if="state.showThemeModal" class="theme-overlay" @tap="hideThemeModal">
			<view class="theme-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">选择主题</text>
					<view class="close-btn" @tap="hideThemeModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				
				<view class="modal-body">
					<view class="theme-options">
						<view 
							class="theme-option" 
							:class="{ 'active': state.currentTheme === 'purple' }"
							@tap="selectTheme('purple')"
						>
							<view class="theme-preview theme-preview-purple"></view>
							<text class="theme-name">紫色主题</text>
							<text class="theme-desc">梦幻紫色，优雅神秘</text>
						</view>
						
						<view 
							class="theme-option" 
							:class="{ 'active': state.currentTheme === 'dark' }"
							@tap="selectTheme('dark')"
						>
							<view class="theme-preview theme-preview-dark"></view>
							<text class="theme-name">暗黑主题</text>
							<text class="theme-desc">经典深色，护眼舒适</text>
						</view>
						
						<view 
							class="theme-option" 
							:class="{ 'active': state.currentTheme === 'light' }"
							@tap="selectTheme('light')"
						>
							<view class="theme-preview theme-preview-light"></view>
							<text class="theme-name">明亮主题</text>
							<text class="theme-desc">清新明亮，简洁大方</text>
						</view>
						
						<view 
							class="theme-option" 
							:class="{ 'active': state.currentTheme === 'blue' }"
							@tap="selectTheme('blue')"
						>
							<view class="theme-preview theme-preview-blue"></view>
							<text class="theme-name">蓝色主题</text>
							<text class="theme-desc">科技蓝色，专业稳重</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 手机号管理弹窗 -->
		<view v-if="state.showPhoneModal" class="theme-overlay" @tap="hidePhoneModal">
			<view class="theme-modal phone-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">{{ state.userInfo.phone ? '修改手机号' : '绑定手机号' }}</text>
					<view class="close-btn" @tap="hidePhoneModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				
				<view class="modal-body form-body">
					<view class="input-group">
						<text class="input-label">手机号码</text>
						<input 
							class="form-input" 
							v-model="state.phoneForm.phone"
							placeholder="请输入手机号码"
							type="number"
							maxlength="11"
						/>
					</view>
					
					<view class="input-group">
						<text class="input-label">验证码</text>
						<view class="code-input-group">
							<input 
								class="form-input code-input" 
								v-model="state.phoneForm.code"
								placeholder="请输入验证码"
								type="number"
								maxlength="6"
							/>
							<button 
								class="code-btn"
								:disabled="!isValidPhone(state.phoneForm.phone) || state.codeSending || state.countdown > 0"
								@tap="sendPhoneCode"
							>
								{{ state.countdown > 0 ? `${state.countdown}s` : (state.codeSending ? '发送中...' : '获取验证码') }}
							</button>
						</view>
					</view>
					
					<button 
						class="submit-btn"
						:disabled="!canSubmitPhone"
						@tap="submitPhone"
					>
						{{ state.userInfo.phone ? '修改手机号' : '绑定手机号' }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 邮箱管理弹窗 -->
		<view v-if="state.showEmailModal" class="theme-overlay" @tap="hideEmailModal">
			<view class="theme-modal email-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">{{ state.userInfo.email ? '修改邮箱' : '绑定邮箱' }}</text>
					<view class="close-btn" @tap="hideEmailModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				
				<view class="modal-body form-body">
					<view class="input-group">
						<text class="input-label">邮箱地址</text>
						<input 
							class="form-input" 
							v-model="state.emailForm.email"
							placeholder="请输入邮箱地址"
							type="email"
						/>
					</view>
					
					<view class="input-group">
						<text class="input-label">验证码</text>
						<view class="code-input-group">
							<input 
								class="form-input code-input" 
								v-model="state.emailForm.code"
								placeholder="请输入验证码"
								type="number"
								maxlength="6"
							/>
							<button 
								class="code-btn"
								:disabled="!isValidEmail(state.emailForm.email) || state.codeSending || state.countdown > 0"
								@tap="sendEmailCode"
							>
								{{ state.countdown > 0 ? `${state.countdown}s` : (state.codeSending ? '发送中...' : '获取验证码') }}
							</button>
						</view>
					</view>
					
					<button 
						class="submit-btn"
						:disabled="!canSubmitEmail"
						@tap="submitEmail"
					>
						{{ state.userInfo.email ? '修改邮箱' : '绑定邮箱' }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 验证弹窗 -->
		<view v-if="state.showVerifyModal" class="theme-overlay" @tap="hideVerifyModal">
			<view class="theme-modal verify-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">身份验证</text>
					<view class="close-btn" @tap="hideVerifyModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				
				<view class="modal-body form-body">
					<text class="verify-tip">
						为了您的账户安全，请先验证{{ state.verifyType === 'phone' ? '手机号码' : '邮箱地址' }}
					</text>
					<text class="verify-target">
						{{ state.verifyType === 'phone' ? state.userInfo.phone : state.userInfo.email }}
					</text>
					
					<view class="input-group">
						<text class="input-label">验证码</text>
						<view class="code-input-group">
							<input 
								class="form-input code-input" 
								v-model="state.verifyForm.code"
								placeholder="请输入验证码"
								type="number"
								maxlength="6"
							/>
							<button 
								class="code-btn"
								:disabled="state.verifyCodeSending || state.verifyCountdown > 0"
								@tap="sendVerifyCode"
							>
								{{ state.verifyCountdown > 0 ? `${state.verifyCountdown}s` : (state.verifyCodeSending ? '发送中...' : '重新发送') }}
							</button>
						</view>
					</view>
					
					<button 
						class="submit-btn"
						:disabled="!state.verifyForm.code || state.verifyForm.code.length < 6"
						@tap="submitVerify"
					>
						验证
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed, nextTick, onMounted, toRefs } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import chatApi from '@/api/chat.js';
	import SimpleMarkdown from '@/utils/markdown.js';
	import { apiConfig } from '@/config/api.config';
	
	// 默认头像URL
	const defaultAvatar = 'https://gitee.com/sggl/avatar-hosting/raw/master/assets/default-avatar.png';
	
	// 处理头像URL（加载失败时使用代理或回退到本地默认头像）
	const processAvatarUrl = (avatarUrl) => {
		if (!avatarUrl) {
			return defaultAvatar;
		}
		
		// 检查是否是data URL或blob URL
		if (avatarUrl.startsWith('data:') || avatarUrl.startsWith('blob:')) {
			return avatarUrl;
		}
		
		// 如果是外部URL，使用CORS代理
		if (avatarUrl.startsWith('http')) {
			return `https://images.weserv.nl/?url=${encodeURIComponent(avatarUrl)}`;
		}
		
		return avatarUrl;
	};
	
	// 计算用户头像
	const userAvatar = computed(() => {
		return processAvatarUrl(state.userInfo.avatar);
	});

	// Markdown渲染函数
	const renderMarkdown = (text) => {
		if (!text) return '';
		return SimpleMarkdown.parse(text);
	};
	
	// 响应式数据
	const state = reactive({
		isLoggedIn: false,
		showUserMenu: false,
		showThemeModal: false,
		showSidebar: false, // 默认收起侧边栏
		isLogging: false,
		isSending: false,
		scrollTop: 0,
		scrollIntoView: '', // 滚动到指定元素ID
		isInputFocused: false, // 输入框聚焦状态
		currentTheme: 'purple', // 当前主题：dark, light, purple, blue
		currentChatId: null,
		selectedFiles: [], // 选中的文件列表
		userInfo: {
			id: '',
			username: '',
			avatar: '',
			phone: '',
			email: '',
			phoneVerified: false,
			emailVerified: false
		},
		loginForm: {
			username: '',
			password: ''
		},
		messages: [],
		chatHistory: [],
		inputMessage: '',
		touchStartX: null,
		touchStartY: null,
		// 收藏相关状态（已替换原账户管理状态）
		showPhoneModal: false,
		showEmailModal: false,
		showVerifyModal: false,
		verifyType: '', // 'phone' 或 'email'
		phoneForm: {
			phone: '',
			code: ''
		},
		emailForm: {
			email: '',
			code: ''
		},
		verifyForm: {
			code: '',
			type: ''
		},
		codeSending: false,
		verifyCodeSending: false,
		countdown: 0,
		verifyCountdown: 0,
		favoriteUpdateTrigger: 0 // 用于触发收藏状态更新
	});
	
	// ==================== 计算属性 ====================
	
	// 验证登录表单是否可提交
	const canLogin = computed(() => {
		return state.loginForm.username.trim() && 
			   state.loginForm.password.trim() && 
			   !state.isLogging;
	});
	
	// 输入框占位符文本
	const inputPlaceholder = computed(() => {
		if (!state.isLoggedIn) {
			return '请先登录后使用智能问答服务...';
		}
		return '在这里输入您的问题...';
	});
	
	// 账户管理相关计算属性
	const canSubmitPhone = computed(() => {
		return isValidPhone(state.phoneForm.phone) && 
			   state.phoneForm.code && 
			   state.phoneForm.code.length === 6;
	});
	
	// 验证邮箱表单是否可提交
	const canSubmitEmail = computed(() => {
		return isValidEmail(state.emailForm.email) && 
			   state.emailForm.code && 
			   state.emailForm.code.length === 6;
	});
	
	// ==================== 工具方法 ====================
	
	/**
	 * 清理本地存储中的blob URL头像
	 * 避免页面刷新后blob URL失效导致头像显示错误
	 */
	const cleanupBlobUrls = () => {
		try {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo && userInfo.avatar && userInfo.avatar.startsWith('blob:')) {
				userInfo.avatar = '';
				uni.setStorageSync('userInfo', userInfo);
			}
		} catch (error) {
			console.error('清理blob URL时出错:', error);
		}
	};
	
	// ==================== 用户认证相关 ====================
	
	/**
	 * 检查用户登录状态
	 * 从本地存储中获取用户信息和token，验证登录状态
	 */
	const checkLoginStatus = () => {
		const userInfo = uni.getStorageSync('userInfo');
		const token = uni.getStorageSync('token');
		
		// 检查本地存储的登录状态
		if (userInfo && token) {
			state.isLoggedIn = true;
			// 过滤掉可能的blob URL头像，避免加载错误
			if (userInfo.avatar && userInfo.avatar.startsWith('blob:')) {
				userInfo.avatar = '';
			}
			state.userInfo = userInfo;
		} else {
			// 没有登录信息，保持未登录状态
			state.isLoggedIn = false;
		}
	};
	
	const goToLogin = () => {
		// 跳转到登录页
		uni.navigateTo({
			url: '/pages/login/login'
		});
	};
	
	// 跳转到个人信息页面
	const goToProfile = () => {
		if (!state.isLoggedIn) {
			uni.showModal({
				title: '需要登录',
				content: '请先登录后才能查看个人信息',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						goToLogin();
					}
				}
			});
			return;
		}
		
		// 关闭用户菜单
		state.showUserMenu = false;
		
		try {
			uni.navigateTo({
				url: '/pages/profile/profile',
				success: () => {
					console.log('跳转个人信息页面成功');
				},
				fail: (err) => {
					console.error('跳转个人信息页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航到个人信息页面时出错:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};
	
	// 微信小程序自动登录处理
	const handleWechatAutoLogin = () => {
		// 保持未登录状态
		state.isLoggedIn = false;
	};
	
	const toggleUserMenu = (e) => {
		// 阻止事件冒泡，防止触发容器的点击事件
		if (e && e.stopPropagation) {
			e.stopPropagation();
		}
		state.showUserMenu = !state.showUserMenu;
	};
	
	// 处理点击空白处关闭下拉菜单
	const handleContainerClick = (e) => {
		// 如果下拉菜单是打开的，就关闭它
		if (state.showUserMenu) {
			state.showUserMenu = false;
		}
		// 同时也关闭其他可能打开的弹窗
		if (state.showThemeModal) {
			state.showThemeModal = false;
		}
		if (state.showPhoneModal) {
			state.showPhoneModal = false;
		}
		if (state.showEmailModal) {
			state.showEmailModal = false;
		}
		if (state.showVerifyModal) {
			state.showVerifyModal = false;
		}
	};
	
	// 退出登录功能
	const logout = () => {
		console.log('logout 函数被调用了');
		uni.showModal({
			title: '确认退出',
			content: '确定要退出登录吗？',
			showCancel: true,
			cancelText: '取消',
			confirmText: '退出',
			success: (res) => {
				if (res.confirm) {
					console.log('用户确认退出登录');
					// 清除本地存储的用户信息
					uni.removeStorageSync('token');
					uni.removeStorageSync('userInfo');
					
					// 重置状态
					state.isLoggedIn = false;
					state.userInfo = {
						id: '',
						username: '',
						avatar: '',
						phone: '',
						email: '',
						phoneVerified: false,
						emailVerified: false
					};
					state.showUserMenu = false;
					
					// 清除对话历史（可选）
					state.messages = [];
					state.chatHistory = [];
					state.currentChatId = null;
					
					// 显示退出成功提示
					uni.showToast({
						title: '已退出登录',
						icon: 'success',
						duration: 2000
					});
					
					console.log('用户已退出登录');
				} else {
					console.log('用户取消退出登录');
				}
			}
		});
	};
	
	// 收藏相关方法
	const goToFavorites = () => {
		// 检查登录状态
		if (!state.isLoggedIn) {
			uni.showModal({
				title: '需要登录',
				content: '请先登录后才能查看收藏',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						goToLogin();
					}
				}
			});
			return;
		}
		
		state.showUserMenu = false;
		
		try {
			uni.navigateTo({
				url: '/pages/favorites/favorites',
				success: () => {
					// 跳转成功
				},
				fail: (err) => {
					console.error('跳转收藏页面失败:', err);
				}
			});
		} catch (error) {
			console.error('导航到收藏页面时出错:', error);
		}
	};
	
	const addToFavorites = (message) => {
		// 如果没有当前对话ID，不能收藏
		if (!state.currentChatId) {
			uni.showToast({
				title: '请先开始对话',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		
		// 获取现有收藏
		const favorites = uni.getStorageSync('favorites') || [];
		
		// 检查是否已经收藏过这个对话
		const existingIndex = favorites.findIndex(item => item.conversationId === state.currentChatId && item.isConversation);
		
		if (existingIndex !== -1) {
			// 取消收藏
			favorites.splice(existingIndex, 1);
			uni.setStorageSync('favorites', favorites);
			
		// 触发界面更新
		state.favoriteUpdateTrigger = Date.now();
		
		uni.showToast({
			title: '取消收藏',
			icon: 'success'
		});
		return;
	}		// 获取当前对话
		const currentChat = state.chatHistory.find(chat => chat.id === state.currentChatId);
		if (!currentChat) {
			uni.showToast({
				title: '对话不存在',
				icon: 'none'
			});
			return;
		}
		
		// 创建对话收藏项
		const favorite = {
			id: Date.now().toString(),
			title: currentChat.title || '未命名对话',
			content: currentChat.preview || '对话记录',
			preview: currentChat.preview || '对话记录',
			tags: ['对话记录'],
			createdAt: Date.now(),
			conversationId: state.currentChatId, // 关联对话ID
			isConversation: true // 标记这是对话收藏
		};
		
		// 添加到收藏
		favorites.unshift(favorite);
		uni.setStorageSync('favorites', favorites);
		
		// 触发界面更新
		state.favoriteUpdateTrigger = Date.now();
		
		uni.showToast({
			title: '收藏成功',
			icon: 'success'
		});
	};
	
	// 收藏对话相关方法
	const favoriteChat = async (chat) => {
		// 检查登录状态
		if (!state.isLoggedIn) {
			uni.showModal({
				title: '需要登录',
				content: '请先登录后才能收藏对话',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						goToLogin();
					}
				}
			});
			return;
		}
		
		try {
			// 检查当前收藏状态
			const isCurrentlyFavorited = isConversationFavorited(chat.id);
			const newFavoriteState = !isCurrentlyFavorited;
			
			// 如果用户已登录，调用后端API
			if (state.isLoggedIn) {
				// 先验证chat.id是否为有效的GUID格式
				const guidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
				if (!guidRegex.test(chat.id)) {
					console.error('无效的对话ID格式:', chat.id);
					uni.showToast({
						title: '对话ID格式无效',
						icon: 'none'
					});
					return;
				}
				
				await chatApi.setCollectConversation(chat.id, newFavoriteState);
				
				// 更新本地对话历史中的收藏状态
				const chatIndex = state.chatHistory.findIndex(c => c.id === chat.id);
				if (chatIndex !== -1) {
					state.chatHistory[chatIndex].isCollect = newFavoriteState;
					saveChatHistory();
				}
			}
			
			// 触发界面更新
			state.favoriteUpdateTrigger = Date.now();
			
			// 显示提示
			uni.showToast({
				title: newFavoriteState ? '已收藏' : '取消收藏',
				icon: 'none'
			});
		} catch (error) {
			console.error('更新收藏状态失败:', error);
			
			uni.showToast({
				title: `操作失败: ${error.message}`,
				icon: 'none'
			});
		}
	};
	
	// 检查当前对话是否已收藏
	const isCurrentChatFavorited = () => {
		// 依赖这个触发器来强制更新
		state.favoriteUpdateTrigger;
		
		if (!state.currentChatId) return false;
		const favorites = uni.getStorageSync('favorites') || [];
		return favorites.some(item => item.conversationId === state.currentChatId && item.isConversation);
	};
	
	// 检查对话是否已收藏
	const isConversationFavorited = (chatId) => {
		// 优先检查对话本身的isCollect属性
		const chat = state.chatHistory.find(c => c.id === chatId);
		if (chat && typeof chat.isCollect === 'boolean') {
			return chat.isCollect;
		}
		
		// 后备方案：检查本地存储的收藏状态
		const favorites = uni.getStorageSync('favorites') || [];
		return favorites.some(item => item.conversationId === chatId);
	};
	
	// 复制内容到剪贴板
	const copyContent = (content) => {
		uni.setClipboardData({
			data: content,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail: function () {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	};
	
	// 复制内容到输入框
	const copyToInput = (content) => {
		state.inputMessage = content;
		uni.showToast({
			title: '已复制到输入框',
			icon: 'success'
		});
	};
	
	const hideAccountModal = () => {
		state.showAccountModal = false;
	};
	
	const openPhoneModal = () => {
		state.showAccountModal = false;
		state.phoneForm.phone = state.userInfo.phone || '';
		state.phoneForm.code = '';
		state.countdown = 0;
		state.showPhoneModal = true;
	};
	
	const hidePhoneModal = () => {
		state.showPhoneModal = false;
		state.phoneForm = { phone: '', code: '' };
		state.countdown = 0;
	};
	
	const openEmailModal = () => {
		state.showAccountModal = false;
		state.emailForm.email = state.userInfo.email || '';
		state.emailForm.code = '';
		state.countdown = 0;
		state.showEmailModal = true;
	};
	
	const hideEmailModal = () => {
		state.showEmailModal = false;
		state.emailForm = { email: '', code: '' };
		state.countdown = 0;
	};
	
	const openVerifyModal = (type) => {
		state.verifyType = type;
		state.verifyForm = { code: '', type };
		state.verifyCountdown = 0;
		state.showVerifyModal = true;
	};
	
	const hideVerifyModal = () => {
		state.showVerifyModal = false;
		state.verifyForm = { code: '', type: '' };
		state.verifyCountdown = 0;
	};
	
	// 验证函数
	const isValidPhone = (phone) => {
		return /^1[3-9]\d{9}$/.test(phone);
	};
	
	const isValidEmail = (email) => {
		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
	};
	
	// 发送手机验证码
	const sendPhoneCode = async () => {
		if (!isValidPhone(state.phoneForm.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}
		
		// 检查是否需要先验证现有手机号
		if (state.userInfo.phone && state.userInfo.phone !== state.phoneForm.phone && state.userInfo.phoneVerified) {
			hidePhoneModal();
			openVerifyModal('phone');
			return;
		}
		
		state.codeSending = true;
		
		try {
			// 调用API发送验证码
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/auth/send-phone-code`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data: {
					phone: state.phoneForm.phone
				}
			});
			
			if (response.data.success) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				startCountdown();
			} else {
				uni.showToast({
					title: response.data.message || '发送失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('发送手机验证码失败:', error);
			uni.showToast({
				title: '发送失败，请重试',
				icon: 'none'
			});
		} finally {
			state.codeSending = false;
		}
	};
	
	// 发送邮箱验证码
	const sendEmailCode = async () => {
		if (!isValidEmail(state.emailForm.email)) {
			uni.showToast({
				title: '请输入正确的邮箱地址',
				icon: 'none'
			});
			return;
		}
		
		// 检查是否需要先验证现有邮箱
		if (state.userInfo.email && state.userInfo.email !== state.emailForm.email && state.userInfo.emailVerified) {
			hideEmailModal();
			openVerifyModal('email');
			return;
		}
		
		state.codeSending = true;
		
		try {
			// 调用API发送验证码
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/auth/send-email-code`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data: {
					email: state.emailForm.email
				}
			});
			
			if (response.data.success) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				startCountdown();
			} else {
				uni.showToast({
					title: response.data.message || '发送失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('发送邮箱验证码失败:', error);
			uni.showToast({
				title: '发送失败，请重试',
				icon: 'none'
			});
		} finally {
			state.codeSending = false;
		}
	};
	
	// 发送身份验证码
	const sendVerifyCode = async () => {
		state.verifyCodeSending = true;
		
		try {
			const endpoint = state.verifyType === 'phone' ? 'send-phone-code' : 'send-email-code';
			const data = state.verifyType === 'phone' 
				? { phone: state.userInfo.phone }
				: { email: state.userInfo.email };
			
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/auth/${endpoint}`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data
			});
			
			if (response.data.success) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
				startVerifyCountdown();
			} else {
				uni.showToast({
					title: response.data.message || '发送失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('发送验证码失败:', error);
			uni.showToast({
				title: '发送失败，请重试',
				icon: 'none'
			});
		} finally {
			state.verifyCodeSending = false;
		}
	};
	
	// 提交手机号
	const submitPhone = async () => {
		if (!canSubmitPhone.value) return;
		
		try {
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/user/update-phone`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data: {
					phone: state.phoneForm.phone,
					code: state.phoneForm.code
				}
			});
			
			if (response.data.success) {
				// 更新用户信息
				state.userInfo.phone = state.phoneForm.phone;
				state.userInfo.phoneVerified = true;
				
				// 保存到本地存储
				uni.setStorageSync('userInfo', state.userInfo);
				
				uni.showToast({
					title: state.userInfo.phone ? '手机号修改成功' : '手机号绑定成功',
					icon: 'success'
				});
				
				hidePhoneModal();
			} else {
				uni.showToast({
					title: response.data.message || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('提交手机号失败:', error);
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			});
		}
	};
	
	// 提交邮箱
	const submitEmail = async () => {
		if (!canSubmitEmail.value) return;
		
		try {
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/user/update-email`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data: {
					email: state.emailForm.email,
					code: state.emailForm.code
				}
			});
			
			if (response.data.success) {
				// 更新用户信息
				state.userInfo.email = state.emailForm.email;
				state.userInfo.emailVerified = true;
				
				// 保存到本地存储
				uni.setStorageSync('userInfo', state.userInfo);
				
				uni.showToast({
					title: state.userInfo.email ? '邮箱修改成功' : '邮箱绑定成功',
					icon: 'success'
				});
				
				hideEmailModal();
			} else {
				uni.showToast({
					title: response.data.message || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('提交邮箱失败:', error);
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			});
		}
	};
	
	// 提交身份验证
	const submitVerify = async () => {
		if (!state.verifyForm.code || state.verifyForm.code.length < 6) return;
		
		try {
			const response = await uni.request({
				url: `${apiConfig.baseUrl}/api/auth/verify`,
				method: 'POST',
				header: {
					'Authorization': `Bearer ${uni.getStorageSync('token')}`,
					'Content-Type': 'application/json'
				},
				data: {
					code: state.verifyForm.code,
					type: state.verifyType
				}
			});
			
			if (response.data.success) {
				uni.showToast({
					title: '验证成功',
					icon: 'success'
				});
				
				hideVerifyModal();
				
				// 根据验证类型打开对应的修改弹窗
				if (state.verifyType === 'phone') {
					openPhoneModal();
				} else {
					openEmailModal();
				}
			} else {
				uni.showToast({
					title: response.data.message || '验证失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('验证失败:', error);
			uni.showToast({
				title: '验证失败，请重试',
				icon: 'none'
			});
		}
	};
	
	// 倒计时功能
	const startCountdown = () => {
		state.countdown = 60;
		const timer = setInterval(() => {
			state.countdown--;
			if (state.countdown <= 0) {
				clearInterval(timer);
			}
		}, 1000);
	};
	
	const startVerifyCountdown = () => {
		state.verifyCountdown = 60;
		const timer = setInterval(() => {
			state.verifyCountdown--;
			if (state.verifyCountdown <= 0) {
				clearInterval(timer);
			}
		}, 1000);
	};
	
	const loadTheme = () => {
		const savedTheme = uni.getStorageSync('currentTheme');
		if (savedTheme) {
			state.currentTheme = savedTheme;
		}
	};
	
	const openThemeModal = () => {
		state.showUserMenu = false;
		state.showThemeModal = true;
	};
	
	const hideThemeModal = () => {
		state.showThemeModal = false;
	};
	
	const selectTheme = (theme) => {
		if (state.currentTheme === theme) return;
		
		state.currentTheme = theme;
		uni.setStorageSync('currentTheme', theme);
	};
	
	const getThemeName = () => {
		const themeNames = {
			'dark': '暗黑',
			'light': '明亮', 
			'purple': '紫色',
			'blue': '蓝色'
		};
		return themeNames[state.currentTheme] || '暗黑';
	};
	
	// 上传图片功能
	const uploadImage = () => {
		// 确保保持在会话状态，不显示欢迎机器人
		state.isInputFocused = true;
		
		// H5环境直接触发图片选择，避免权限问题
		chooseImageForUpload();
	};
	
	// 选择图片用于普通上传
	const chooseImageForUpload = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['camera', 'album'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0];
				
				// 将图片添加到selectedFiles数组中
				uni.getFileSystemManager().readFile({
					filePath: tempFilePath,
					success: (res) => {
						const file = {
							name: `image_${Date.now()}.jpg`,
							type: 'image/jpeg',
							path: tempFilePath,
							data: res.data
						};
						
						// 添加到选中文件列表
						if (!state.selectedFiles) {
							state.selectedFiles = [];
						}
						state.selectedFiles.push(file);
						
						// 在输入框中添加图片相关的提示文本
						if (!state.inputMessage.trim()) {
							state.inputMessage = '我想分析这张图片：';
						}
						
						uni.showToast({
							title: '图片已选择',
							icon: 'success',
							duration: 2000
						});
						
						console.log('图片已添加到文件列表，当前文件数量:', state.selectedFiles.length);
					},
					fail: (error) => {
						console.error('处理图片失败:', error);
						uni.showToast({
							title: '图片处理失败',
							icon: 'error'
						});
					}
				});
			},
			fail: (err) => {
				uni.showToast({
					title: '选择图片失败',
					icon: 'error'
				});
				console.error('选择图片失败:', err);
			}
		});
	};
	
	// 选择图片用于OCR文字识别
	const chooseImageForOCR = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], // OCR建议使用原图获得更好效果
			sourceType: ['camera', 'album'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0];
				
				// 显示加载提示
				uni.showLoading({
					title: '正在识别图片文字...'
				});
				
				// 调用OCR接口
				extractTextFromImage(tempFilePath);
			},
			fail: (err) => {
				uni.showToast({
					title: '选择图片失败',
					icon: 'error'
				});
				console.error('选择图片失败:', err);
			}
		});
	};
	
	// OCR文字提取功能
	const extractTextFromImage = async (imagePath) => {
		try {
			const baseUrl = apiConfig.baseUrl; // 使用配置的API地址
			
			// 使用uni.uploadFile处理图片上传
			uni.uploadFile({
				url: `${baseUrl}/api/ImageAnalysis/extract-text`,
				filePath: imagePath,
				name: 'image',
				success: (uploadRes) => {
					try {
						const result = JSON.parse(uploadRes.data);
						if (result.success && result.data.extractedText) {
							// 将识别的文字填入输入框
							state.inputMessage = result.data.extractedText;
							
							uni.hideLoading();
							uni.showToast({
								title: '文字识别成功',
								icon: 'success',
								duration: 2000
							});
							
							console.log('OCR识别结果:', result.data.extractedText);
						} else {
							throw new Error(result.message || '文字识别失败');
						}
					} catch (parseError) {
						console.error('解析OCR响应失败:', parseError);
						uni.hideLoading();
						uni.showToast({
							title: '解析识别结果失败',
							icon: 'error',
							duration: 2000
						});
					}
				},
				fail: (error) => {
					console.error('OCR请求失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: 'OCR识别失败',
						icon: 'error',
						duration: 2000
					});
				}
			});
			
		} catch (error) {
			console.error('OCR处理失败:', error);
			uni.hideLoading();
			uni.showToast({
				title: error.message || 'OCR识别失败',
				icon: 'error',
				duration: 2000
			});
		}
	};
	
	// 上传文件功能
	const uploadFile = () => {
		// 确保保持在会话状态，不显示欢迎机器人
		state.isInputFocused = true;
		
		// 在微信小程序中使用 uni.chooseMessageFile
		uni.chooseMessageFile({
			count: 5, // 最多选择5个文件
			type: 'file', // 只选择文件
			extension: ['txt', 'md', 'html', 'json', 'xml', 'csv', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'rtf'],
			success: (res) => {
				console.log('选择的文件:', res.tempFiles);
				
				if (res.tempFiles && res.tempFiles.length > 0) {
					// 转换文件格式
					const files = res.tempFiles.map(file => ({
						name: file.name,
						size: file.size,
						path: file.path,
						tempFilePath: file.path,
						type: file.type || 'application/octet-stream'
					}));
					
					// 保存选中的文件到state中
					state.selectedFiles = files;
					
					// 在输入框中添加文件相关的提示文本
					const fileNames = files.map(f => f.name).join(', ');
					if (!state.inputMessage.trim()) {
						state.inputMessage = `请帮我分析这${files.length}个文件：${fileNames}`;
					}
					
					uni.showToast({
						title: `已选择${files.length}个文件`,
						icon: 'success',
						duration: 2000
					});
					console.log('文件已选择，数量:', files.length);
				}
			},
			fail: (err) => {
				console.error('选择文件失败:', err);
				// 如果微信小程序的chooseMessageFile失败，尝试其他方法
				if (typeof document !== 'undefined') {
					// H5环境降级处理
					const input = document.createElement('input');
					input.type = 'file';
					input.accept = '.txt,.md,.html,.json,.xml,.csv,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.rtf';
					input.multiple = true;
					input.onchange = (e) => {
						const files = Array.from(e.target.files);
						if (files.length > 0) {
							state.selectedFiles = files;
							const fileNames = files.map(f => f.name).join(', ');
							if (!state.inputMessage.trim()) {
								state.inputMessage = `请帮我分析这${files.length}个文件：${fileNames}`;
							}
							uni.showToast({
								title: `已选择${files.length}个文件`,
								icon: 'success',
								duration: 2000
							});
							console.log('文件已选择，数量:', files.length);
						}
					};
					input.click();
				} else {
					// 如果以上都不支持，显示错误信息
					uni.showModal({
						title: '文件选择失败',
						content: '当前环境不支持文件上传功能。请在微信聊天中选择文件，然后转发到小程序中使用。',
						showCancel: false,
						confirmText: '知道了'
					});
				}
			}
		});
	};
	
	const sendMessage = async () => {
		if (!state.inputMessage.trim() || state.isSending) return;
		
		// 只有登录用户才能发送消息
		if (!state.isLoggedIn) {
			uni.showModal({
				title: '需要登录',
				content: '请先登录后才能发送消息',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						goToLogin();
					}
				}
			});
			return;
		}
		
		const userMessage = state.inputMessage.trim();
		const hasFiles = state.selectedFiles && state.selectedFiles.length > 0;
		state.inputMessage = '';
		
		// 确保输入框处于聚焦状态
		state.isInputFocused = true;
		
		// 添加用户消息（包含文件信息）
		let userMessageContent = userMessage;
		if (hasFiles) {
			const fileNames = state.selectedFiles.map(f => f.name || '文件').join(', ');
			userMessageContent += `\n\n📎 附件: ${fileNames}`;
		}
		
		state.messages.push({
			type: 'user',
			content: userMessageContent,
			timestamp: Date.now()
		});
		
		// 添加AI正在输入的消息
		const aiMessageIndex = state.messages.length;
		state.messages.push({
			type: 'ai',
			content: hasFiles ? '正在解析文件...' : '正在思考...',
			loading: true,
			timestamp: Date.now(),
			sources: []
		});
		
		scrollToBottom();
		state.isSending = true;
		
		let isNewConversation = false; // 标记是否创建了新对话
		
		try {
			let conversationId = state.currentChatId;
			
			// 如果没有当前对话，先创建新对话
			if (!conversationId) {
				isNewConversation = true; // 设置标记
				// 使用智能标题生成器
				const title = generateChatTitle();
				
				const createResponse = await chatApi.createConversation({
					userId: state.userInfo.id,
					title: title
				});
				
				if (createResponse && createResponse.id) {
					conversationId = createResponse.id;
					state.currentChatId = conversationId;
					
					// 创建新的对话记录并添加到历史
					const newChat = {
						id: conversationId,
						title: title, // 使用上面生成的智能标题
						preview: userMessage.substring(0, 50) + (userMessage.length > 50 ? '...' : ''),
						lastUpdate: new Date(),
						messages: [...state.messages],
						createdAt: Date.now(),
						updatedAt: Date.now(),
						isCollect: false
					};
					
					// 添加到对话历史列表开头
					state.chatHistory.unshift(newChat);
					saveChatHistory();
				}
			}
			
			// 统一使用数据对象和sendStreamWithFiles方法（无论是否有文件）
			const requestData = {
				question: userMessage,
				userId: state.userInfo.id,
				useRAG: 'true',
				maxResults: '5',
				similarityThreshold: '0.01'
			};
			
			// 如果有conversationId，传递给后端
			if (conversationId) {
				requestData.conversationId = conversationId;
			}
			
			// 如果有文件，添加文件
			if (hasFiles) {
				requestData.files = state.selectedFiles;
				
				// 调试信息
				console.log('发送带文件的流式请求，数据内容:', requestData);
			} else {
				console.log('发送无文件的流式请求');
			}
			
			// 统一使用sendStreamWithFiles方法
			await sendStreamWithFiles(requestData, aiMessageIndex);
			
		} catch (error) {
			console.error('发送消息失败:', error);
			
			// 更新AI消息为错误信息
			state.messages[aiMessageIndex] = {
				type: 'ai',
				content: '抱歉，我暂时无法回答您的问题，请稍后再试。',
				loading: false,
				timestamp: Date.now(),
				sources: []
			};
		} finally {
			state.isSending = false;
			// 清空选中的文件
			state.selectedFiles = [];
			// 只有在没有创建新对话时才更新对话历史（避免重复）
			if (!isNewConversation) {
				updateCurrentChat();
			}
		}
	};
	
	// 发送带文件的流式请求
	const sendStreamWithFiles = async (requestData, aiMessageIndex) => {
		return new Promise((resolve, reject) => {
			const baseUrl = 'http://localhost:5000'; // 后端API地址
			console.log('发送请求到:', `${baseUrl}/api/chat/ask-stream-files`);
			
		// 如果有文件，使用 uni.uploadFile
		if (requestData.files && requestData.files.length > 0) {
			// 准备表单数据（不包含文件）
			const formData = { ...requestData };
			delete formData.files;
			
			// 只上传第一个文件（uni.uploadFile一次只能上传一个文件）
			const firstFile = requestData.files[0];
			console.log('上传文件:', firstFile);
			
			// 确定文件路径
			const filePath = firstFile.tempFilePath || firstFile.path || firstFile.uri;
			
			if (!filePath) {
				reject(new Error('文件路径无效'));
				return;
			}
			
			uni.uploadFile({
				url: `${baseUrl}/api/chat/ask-stream-files`,
				filePath: filePath,
				name: 'files',
				formData: formData,
				success: (res) => {
					console.log('响应状态:', res.statusCode);
					console.log('响应数据:', res.data);
					
					if (res.statusCode !== 200) {
						reject(new Error(`HTTP错误：${res.statusCode}`));
						return;
					}
						
						try {
							// 处理响应数据
							const data = JSON.parse(res.data);
							handleStreamEvent(data, aiMessageIndex);
							resolve();
						} catch (error) {
							// 如果是流式数据，按行处理
							const lines = res.data.split('\n');
							console.log('[前端] 分割后行数:', lines.length);
							
							for (const line of lines) {
								if (line.startsWith('data:')) {
									try {
										const jsonData = line.substring(5).trim();
										console.log('[前端] 解析JSON:', jsonData);
										const eventData = JSON.parse(jsonData);
										console.log('[前端] 解析成功:', eventData);
										handleStreamEvent(eventData, aiMessageIndex);
									} catch (e) {
										console.log('[前端] JSON解析失败:', e.message, 'data:', line);
									}
								} else if (line.trim()) {
									console.log('[前端] 非data行:', line);
								}
							}
							resolve();
						}
					},
					fail: (error) => {
						console.error('[前端] 上传失败:', error);
						reject(error);
					}
				});
			} else {
				// 没有文件，使用简单的 ask 端点
				console.log('发送普通问答请求，数据:', requestData);
				
				// 构建请求数据
				const requestBody = {
					question: requestData.question,
					userId: requestData.userId,
					conversationId: requestData.conversationId || null,
					useRAG: requestData.useRAG === 'true' || requestData.useRAG === true,
					maxResults: parseInt(requestData.maxResults) || 5,
					similarityThreshold: parseFloat(requestData.similarityThreshold) || 0.01
				};
				
				uni.request({
					url: `${baseUrl}/api/chat/ask`,
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${uni.getStorageSync('token') || ''}`
					},
					data: requestBody,
					success: (res) => {
						console.log('普通问答响应状态:', res.statusCode);
						console.log('普通问答响应数据:', res.data);
						
						if (res.statusCode !== 200) {
							reject(new Error(`HTTP错误：${res.statusCode}`));
							return;
						}
						
						try {
							// /api/chat/ask 返回标准JSON格式
							const responseData = res.data;
							
							if (responseData.isSuccessful) {
								// 成功响应，直接设置AI消息内容
								const aiMessage = state.messages[aiMessageIndex];
								aiMessage.content = responseData.answer || '抱歉，没有获得回答';
								aiMessage.loading = false;
								
								// 如果有来源信息
								if (responseData.sources && responseData.sources.length > 0) {
									aiMessage.sources = responseData.sources;
								}
								
								console.log('[前端] 普通问答成功:', responseData.answer);
								
								// 滚动到底部
								scrollToBottom();
							} else {
								// 失败响应
								reject(new Error(responseData.errorMessage || '服务器处理失败'));
								return;
							}
							
							resolve();
						} catch (error) {
							console.error('普通问答数据处理失败:', error);
							reject(error);
						}
					},
					fail: (error) => {
						console.error('[前端] 普通问答请求失败:', error);
						reject(error);
					}
				});
			}
		});
	};
	
	// 处理流式事件
	const handleStreamEvent = (eventData, aiMessageIndex) => {
		console.log('[前端] 收到流式数据:', eventData);
		const aiMessage = state.messages[aiMessageIndex];
		
		if (!eventData) {
			console.log('[前端] 收到空数据');
			return;
		}
		
		// 处理不同类型的响应数据
		if (typeof eventData === 'string') {
			// 如果是字符串，尝试解析JSON
			try {
				eventData = JSON.parse(eventData);
			} catch (e) {
				// 如果不是JSON，直接作为文本处理
				aiMessage.content = eventData;
				aiMessage.loading = false;
				scrollToBottom();
				return;
			}
		}
		
		if (eventData.message === "开始处理请求") {
			console.log('[前端] 开始处理请求');
			aiMessage.content = "正在处理...";
		} else if (eventData.message && eventData.message.includes("解析")) {
			console.log('[前端] 解析消息:', eventData.message);
			aiMessage.content = eventData.message;
		} else if (eventData.files) {
			// 文件解析完成
			console.log('[前端] 文件解析完成:', eventData.files);
			const fileCount = eventData.files.length;
			aiMessage.content = `已解析${fileCount}个文件，正在生成回答...`;
		} else if (eventData.sources) {
			// 设置来源信息
			console.log('[前端] 收到sources:', eventData.sources);
			aiMessage.sources = eventData.sources || [];
			aiMessage.loading = false;
		} else if (eventData.chunk) {
			// 累加文本块，实现打字效果
			console.log('[前端] 收到chunk:', eventData.chunk);
			if (aiMessage.content.includes("正在") || aiMessage.content.includes("已解析")) {
				console.log('[前端] 第一个chunk，替换加载文本');
				aiMessage.content = eventData.chunk; // 第一个chunk替换加载文本
			} else {
				console.log('[前端] 后续chunk，累加文本');
				aiMessage.content += eventData.chunk; // 后续chunk累加
			}
			aiMessage.loading = false;
		} else if (eventData.content) {
			// 直接内容回复（非流式）
			console.log('[前端] 收到完整回复:', eventData.content);
			aiMessage.content = eventData.content;
			aiMessage.loading = false;
			if (eventData.sources) {
				aiMessage.sources = eventData.sources;
			}
		} else if (eventData.message === "请求处理完成") {
			// 完成处理
			console.log('[前端] 请求处理完成');
			aiMessage.loading = false;
		} else if (eventData.error) {
			// 错误处理
			console.log('[前端] 收到错误:', eventData.error);
			aiMessage.content = `处理时出错：${eventData.error}`;
			aiMessage.loading = false;
		} else if (eventData.success !== undefined && eventData.data) {
			// 标准API响应格式
			console.log('[前端] 收到标准API响应:', eventData.data);
			if (eventData.data.content) {
				aiMessage.content = eventData.data.content;
			} else if (eventData.data.reply) {
				aiMessage.content = eventData.data.reply;
			}
			if (eventData.data.sources) {
				aiMessage.sources = eventData.data.sources;
			}
			aiMessage.loading = false;
		} else {
			console.log('[前端] 未处理的事件数据:', eventData);
			// 如果有直接的文本内容，显示它
			if (eventData.reply) {
				aiMessage.content = eventData.reply;
				aiMessage.loading = false;
			} else if (eventData.answer) {
				aiMessage.content = eventData.answer;
				aiMessage.loading = false;
			}
		}
		
		// 实时滚动到底部
		scrollToBottom();
	};
	
	// 获取API URL
	const getApiUrl = (path) => {
		// 统一使用完整的后端URL
		return `${apiConfig.baseUrl}${path}`;
	};
	
	// 清除选中的文件
	const clearSelectedFiles = () => {
		state.selectedFiles = [];
		uni.showToast({
			title: '已清除选中文件',
			icon: 'success',
			duration: 1500
		});
	};
	
	// 格式化文件大小
	const formatFileSize = (bytes) => {
		if (!bytes || bytes === 0) return '0 B';
		const k = 1024;
		const sizes = ['B', 'KB', 'MB', 'GB'];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
	};
	
	// 获取文件图标
	const getFileIcon = (fileName) => {
		const ext = getFileExtension(fileName).toLowerCase();
		const iconMap = {
			'pdf': '📄',
			'doc': '📝',
			'docx': '📝', 
			'xls': '📊',
			'xlsx': '📊',
			'ppt': '📈',
			'pptx': '📈',
			'txt': '📄',
			'md': '📄',
			'html': '🌐',
			'json': '📋',
			'xml': '📋',
			'csv': '📊',
			'rtf': '📝',
			'jpg': '🖼️',
			'jpeg': '🖼️',
			'png': '🖼️',
			'gif': '🖼️',
			'mp4': '🎬',
			'mp3': '🎵',
			'zip': '📦',
			'rar': '📦'
		};
		return iconMap[ext] || '📄';
	};
	
	// 获取文件扩展名
	const getFileExtension = (fileName) => {
		if (!fileName) return '';
		const lastDot = fileName.lastIndexOf('.');
		return lastDot > 0 ? fileName.substring(lastDot + 1).toUpperCase() : '';
	};
	
	// 获取文件类型CSS类
	const getFileTypeClass = (fileName) => {
		const ext = getFileExtension(fileName).toLowerCase();
		if (['pdf'].includes(ext)) return 'file-type-pdf';
		if (['doc', 'docx', 'rtf'].includes(ext)) return 'file-type-doc';
		if (['xls', 'xlsx', 'csv'].includes(ext)) return 'file-type-excel';
		if (['ppt', 'pptx'].includes(ext)) return 'file-type-ppt';
		if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'file-type-image';
		if (['mp4', 'avi', 'mov'].includes(ext)) return 'file-type-video';
		if (['mp3', 'wav', 'flac'].includes(ext)) return 'file-type-audio';
		if (['zip', 'rar', '7z'].includes(ext)) return 'file-type-archive';
		return 'file-type-default';
	};
	
	// 截断文件名
	const truncateFileName = (fileName, maxLength) => {
		if (!fileName || fileName.length <= maxLength) return fileName;
		const ext = getFileExtension(fileName);
		const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));
		const truncatedName = nameWithoutExt.substring(0, maxLength - ext.length - 3) + '...';
		return ext ? `${truncatedName}.${ext.toLowerCase()}` : truncatedName;
	};
	
	// 移除单个文件
	const removeFile = (index) => {
		state.selectedFiles.splice(index, 1);
		uni.showToast({
			title: '已移除文件',
			icon: 'success',
			duration: 1000
		});
	};
	
	const scrollToBottom = () => {
		nextTick(() => {
			// 使用scroll-into-view滚动到最后一条消息
			if (state.messages.length > 0) {
				const lastMessageId = 'message-' + (state.messages.length - 1);
				// 在UniApp中直接设置scroll-into-view属性
				state.scrollIntoView = lastMessageId;
				
				// 延时清除scroll-into-view以允许下次滚动
				setTimeout(() => {
					state.scrollIntoView = '';
				}, 500);
			}
			// 设置一个足够大的值来确保滚动到底部
			state.scrollTop = 999999;
			// 使用延时确保滚动生效
			setTimeout(() => {
				state.scrollTop = 999999;
			}, 100);
		});
	};
	
	const handleInputFocus = () => {
		state.isInputFocused = true;
	};
	
	const handleInput = () => {
		// 当用户开始输入时，确保输入框处于聚焦状态
		if (state.inputMessage.trim() && !state.isInputFocused) {
			state.isInputFocused = true;
		}
	};
	
	const handleInputBlur = () => {
		// 如果没有消息且没有输入内容，则取消聚焦状态
		if (state.messages.length === 0 && !state.inputMessage.trim()) {
			state.isInputFocused = false;
		}
	};
	
	const exitSession = () => {
		state.messages = [];
		state.currentChatId = null;
		state.isInputFocused = false;
		state.inputMessage = '';
		
		uni.showToast({
			title: '已退出会话',
			icon: 'success',
			duration: 1500
		});
	};
	
	const handleTouchStart = (e) => {
		state.touchStartX = e.touches[0].clientX;
		state.touchStartY = e.touches[0].clientY;
	};
	
	const handleTouchEnd = (e) => {
		if (!state.touchStartX) return;
		
		const touchEndX = e.changedTouches[0].clientX;
		const touchEndY = e.changedTouches[0].clientY;
		const deltaX = touchEndX - state.touchStartX;
		const deltaY = touchEndY - state.touchStartY;
		
		// 判断是否为水平滑动（水平距离大于垂直距离，且大于最小滑动距离）
		if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
			if (deltaX > 0 && state.touchStartX < 100) {
				// 右滑且起始位置在屏幕左侧，打开侧边栏
				state.showSidebar = true;
			} else if (deltaX < 0 && state.showSidebar) {
				// 左滑且侧边栏已打开，关闭侧边栏
				state.showSidebar = false;
			}
		}
		
		state.touchStartX = null;
		state.touchStartY = null;
	};
	
	const toggleSidebar = () => {
		state.showSidebar = !state.showSidebar;
	};
	
	const closeSidebar = () => {
		state.showSidebar = false;
	};
	
	const newChat = () => {
		const chatId = Date.now().toString();
		state.currentChatId = chatId;
		state.messages = [];
		closeSidebar();
		
		// 添加到历史记录
		state.chatHistory.unshift({
			id: chatId,
			title: '未命名对话',
			preview: '开始新的对话...',
			lastUpdate: new Date(),
			createdAt: Date.now(),
			updatedAt: Date.now(),
			messages: []
		});
		
		saveChatHistory();
	};

	const loadChat = async (chatId) => {
		try {
			// 设置当前对话ID
			state.currentChatId = chatId;
			
			// 如果用户已登录，从后端获取对话消息
			if (state.isLoggedIn && state.userInfo.id) {
				// 显示加载提示
				uni.showLoading({
					title: '加载对话中...'
				});
				
				try {
					const messages = await chatApi.getConversationMessages(chatId);
					
					// 将后端消息转换为前端格式
					// 每个后端消息包含用户问题(content)和AI回复(reply)，需要转换为两条前端消息
					const frontendMessages = [];
					if (Array.isArray(messages)) {
						messages.forEach(msg => {
							// 添加用户消息
							if (msg.content) {
								frontendMessages.push({
									type: 'user',
									content: msg.content,
									timestamp: new Date(msg.createdAt).getTime(),
									sources: []
								});
							}
							
							// 添加AI回复消息
							if (msg.reply) {
								frontendMessages.push({
									type: 'ai',
									content: msg.reply,
									timestamp: new Date(msg.createdAt).getTime() + 1, // 稍微晚一点
									sources: msg.sources || []
								});
							}
						});
					}
					
					state.messages = frontendMessages;
					
				} catch (error) {
					console.error('从后端加载对话消息失败:', error);
					// 后备方案：从本地缓存加载
					const chat = state.chatHistory.find(c => c.id === chatId);
					if (chat && chat.messages) {
						state.messages = [...chat.messages];
					} else {
						state.messages = [];
					}
				} finally {
					uni.hideLoading();
				}
			} else {
				// 未登录，无法加载对话
				state.messages = [];
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
			}
			
			// 滚动到底部
			nextTick(() => {
				scrollToBottom();
			});
			
			// 给用户一个成功反馈
			uni.showToast({
				title: '对话已加载',
				icon: 'success',
				duration: 1500
			});
			
		} catch (error) {
			console.error('加载对话失败:', error);
			uni.showToast({
				title: '加载对话失败',
				icon: 'error',
				duration: 2000
			});
		}
		
		closeSidebar();
	};
	
	const deleteChat = async (chatId) => {
		// 检查登录状态
		if (!state.isLoggedIn) {
			uni.showModal({
				title: '需要登录',
				content: '请先登录后才能删除对话',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						goToLogin();
					}
				}
			});
			return;
		}
		
		// 先关闭侧边栏，避免遮挡确认对话框
		state.showSidebar = false;
		
		// 显示确认对话框
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这个对话吗？此操作无法撤销。',
			showCancel: true,
			cancelText: '取消',
			confirmText: '删除',
			confirmColor: '#ff4444',
			success: async (res) => {
				if (res.confirm) {
					try {
						// 调用后端API删除（只有登录用户才能到达这里）
						await chatApi.deleteConversation(chatId);
						// 删除成功后重新加载聊天历史
						await loadChatHistory();
						
						// 如果删除的是当前对话，清空消息列表
						if (state.currentChatId === chatId) {
							state.currentChatId = null;
							state.messages = [];
						}
						
						// 同时清理本地收藏记录
						const favorites = uni.getStorageSync('favorites') || [];
						const updatedFavorites = favorites.filter(item => item.conversationId !== chatId);
						uni.setStorageSync('favorites', updatedFavorites);
						
						// 触发收藏状态更新
						state.favoriteUpdateTrigger = Date.now();
						
						uni.showToast({
							title: '对话已删除',
							icon: 'success'
						});
						
					} catch (error) {
						console.error('删除对话失败:', error);
						
						// 尝试重新加载列表
						try {
							await loadChatHistory();
						} catch (loadError) {
							console.error('重新加载聊天历史失败:', loadError);
						}
						
						// 如果删除的是当前对话，清空消息列表
						if (state.currentChatId === chatId) {
							state.currentChatId = null;
							state.messages = [];
						}
						
						uni.showToast({
							title: '删除失败，但已从本地移除',
							icon: 'none'
						});
					}
				}
			}
		});
	};
	
	
	const saveChatHistory = () => {
		// 在保存前按创建时间重新排序，确保最新的在前
		state.chatHistory.sort((a, b) => {
			const aTime = a.createdAt || new Date(a.lastUpdate).getTime();
			const bTime = b.createdAt || new Date(b.lastUpdate).getTime();
			return bTime - aTime; // 降序排序，最新的在前
		});
		
		uni.setStorageSync('chatHistory', state.chatHistory);
	};
	
	const loadChatHistory = async () => {
		// 只有登录用户才能获取对话历史
		if (state.isLoggedIn && state.userInfo.id) {
			try {
				const response = await chatApi.getUserConversations(state.userInfo.id);
				
				// 后端直接返回数组，不是包装在data字段中
				const conversations = Array.isArray(response) ? response : [];
				
				state.chatHistory = conversations.map(conv => ({
					id: conv.id,
					title: conv.title || '未命名对话',
					preview: conv.preview || '开始新的对话...',
					lastUpdate: new Date(conv.updatedAt || conv.createdAt),
					messages: conv.messages || [],
					createdAt: new Date(conv.createdAt).getTime(),
					updatedAt: new Date(conv.updatedAt || conv.createdAt).getTime(),
					isCollect: conv.isCollect || false // 保存收藏状态
				})).sort((a, b) => b.createdAt - a.createdAt); // 按创建时间降序排序，最新的在前
				
			} catch (error) {
				console.error('从后端加载聊天历史失败:', error);
				// 如果后端加载失败，尝试从本地存储加载
				const localHistory = uni.getStorageSync('chatHistory') || [];
				state.chatHistory = localHistory.sort((a, b) => {
					const aTime = a.createdAt || new Date(a.lastUpdate).getTime();
					const bTime = b.createdAt || new Date(b.lastUpdate).getTime();
					return bTime - aTime; // 降序排序，最新的在前
				});
			}
		} else {
			// 未登录状态，从本地存储加载历史记录
			const localHistory = uni.getStorageSync('chatHistory') || [];
			state.chatHistory = localHistory.sort((a, b) => {
				const aTime = a.createdAt || new Date(a.lastUpdate).getTime();
				const bTime = b.createdAt || new Date(b.lastUpdate).getTime();
				return bTime - aTime; // 降序排序，最新的在前
			});
		}
	};
	
	const updateCurrentChat = () => {
		if (state.currentChatId && state.messages.length > 0) {
			const chatIndex = state.chatHistory.findIndex(chat => chat.id === state.currentChatId);
			if (chatIndex !== -1) {
				const lastMessage = state.messages[state.messages.length - 1];
				state.chatHistory[chatIndex] = {
					...state.chatHistory[chatIndex],
					title: generateChatTitle(),
					preview: lastMessage.content.substring(0, 50) + (lastMessage.content.length > 50 ? '...' : ''),
					lastUpdate: new Date(),
					messages: [...state.messages]
				};
				saveChatHistory();
			}
		}
	};
	
	const generateChatTitle = () => {
		if (state.messages.length > 0) {
			const firstUserMessage = state.messages.find(msg => msg.type === 'user');
			if (firstUserMessage) {
				// 使用前16个字节的字符作为标题
				const content = firstUserMessage.content;
				// 转换为字节数组，取前16个字节，再转回字符串
				const encoder = new TextEncoder();
				const decoder = new TextDecoder();
				const bytes = encoder.encode(content);
				if (bytes.length <= 16) {
					return content;
				} else {
					// 截取前16个字节，但要确保不会截断多字节字符
					const truncatedBytes = bytes.slice(0, 16);
					try {
						return decoder.decode(truncatedBytes);
					} catch {
						// 如果解码失败（可能截断了多字节字符），则逐个减少字节直到能正确解码
						for (let i = 15; i >= 1; i--) {
							try {
								return decoder.decode(truncatedBytes.slice(0, i));
							} catch {
								continue;
							}
						}
						return content.substring(0, 1); // 最坏情况下返回第一个字符
					}
				}
			}
		}
		return '新对话';
	};
	
	// 生命周期钩子
	onLoad(async (options) => {
		checkLoginStatus();
		loadTheme();
		await loadChatHistory();
		
		// 如果有chatId参数，加载对应的对话
		if (options && options.chatId) {
			// 等待数据加载完成后再加载对话
			loadChat(options.chatId);
		}
	});
	
	onShow(() => {
		checkLoginStatus();
		// 重新加载聊天历史
		loadChatHistory();
	});
	
	onMounted(() => {
		cleanupBlobUrls(); // 清理可能存在的blob URL
		
		// 监听从收藏页面返回选中聊天的事件
		uni.$on('selectChat', (chatId) => {
			// 在聊天历史中找到对应的聊天并选中
			const chat = state.chatHistory.find(c => c.id === chatId);
			if (chat) {
				selectChat(chat);
			}
		});
		
		// 监听用户信息更新事件（从个人资料页面返回时）
		uni.$on('userInfoUpdated', (updatedUserInfo) => {
			console.log('收到用户信息更新事件:', updatedUserInfo);
			// 更新本地用户信息
			state.userInfo = { ...state.userInfo, ...updatedUserInfo };
		});
	});
	
	// 解构 state 中的属性供模板使用
	const { 
		isLoggedIn, showUserMenu, showThemeModal,
		showSidebar, isLogging, isSending, scrollTop, isInputFocused, currentTheme,
		currentChatId, userInfo, messages,
		inputMessage, chatHistory, touchStartX, touchStartY, phoneForm, emailForm,
		verifyForm, countdown, codeSending, emailCodeSending, verifyCountdown,
		verifyCodeSending, showPhoneModal, showEmailModal, showVerifyModal, verifyType
	} = toRefs(state);
</script>

<style scoped>
	/* 主题变量 */
	.app-container {
		--primary-color: #10a37f;
		--primary-light: #1db584;
		--primary-dark: #0d8b6b;
		--bg-primary: #1e1e1e;
		--bg-secondary: #2d2d30;
		--bg-card: rgba(32, 33, 35, 0.95);
		--text-primary: #ffffff;
		--text-secondary: #8e8ea0;
		--border-color: rgba(77, 77, 79, 0.3);
		--shadow-color: rgba(0, 0, 0, 0.2);
		--accent-1: rgba(120, 119, 198, 0.1);
		--accent-2: rgba(255, 119, 198, 0.1);
		
		height: 100vh;
		background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* 明亮主题 */
	.app-container.theme-light {
		--primary-color: #0969da;
		--primary-light: #218bff;
		--primary-dark: #0550ae;
		--bg-primary: #f6f8fa;
		--bg-secondary: #ffffff;
		--bg-card: rgba(255, 255, 255, 0.95);
		--text-primary: #24292f;
		--text-secondary: #656d76;
		--border-color: rgba(209, 213, 219, 0.8);
		--shadow-color: rgba(0, 0, 0, 0.1);
		--accent-1: rgba(59, 130, 246, 0.1);
		--accent-2: rgba(236, 72, 153, 0.1);
	}
	
	/* 紫色主题 */
	.app-container.theme-purple {
		--primary-color: #8b5cf6;
		--primary-light: #a78bfa;
		--primary-dark: #7c3aed;
		--bg-primary: #1e1b2e;
		--bg-secondary: #2d2438;
		--bg-card: rgba(45, 36, 56, 0.95);
		--text-primary: #f8fafc;
		--text-secondary: #a1a1aa;
		--border-color: rgba(139, 92, 246, 0.3);
		--shadow-color: rgba(139, 92, 246, 0.2);
		--accent-1: rgba(139, 92, 246, 0.15);
		--accent-2: rgba(236, 72, 153, 0.15);
	}
	
	/* 蓝色主题 */
	.app-container.theme-blue {
		--primary-color: #0ea5e9;
		--primary-light: #38bdf8;
		--primary-dark: #0284c7;
		--bg-primary: #0c1427;
		--bg-secondary: #1e293b;
		--bg-card: rgba(30, 41, 59, 0.95);
		--text-primary: #f1f5f9;
		--text-secondary: #94a3b8;
		--border-color: rgba(14, 165, 233, 0.3);
		--shadow-color: rgba(14, 165, 233, 0.2);
		--accent-1: rgba(14, 165, 233, 0.15);
		--accent-2: rgba(59, 130, 246, 0.15);
	}

	.app-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: 
			radial-gradient(circle at 20% 80%, var(--accent-1) 0%, transparent 50%),
			radial-gradient(circle at 80% 20%, var(--accent-2) 0%, transparent 50%);
		pointer-events: none;
		z-index: 0;
		transition: all 0.5s ease;
	}
	
	/* 导航栏 */
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 40rpx;
		background: var(--bg-card);
		backdrop-filter: blur(20rpx);
		border-bottom: 1rpx solid var(--border-color);
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 20rpx var(--shadow-color);
		transition: all 0.3s ease;
	}
	
	.nav-left {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 24rpx;
	}
	
	.app-back-btn {
		background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
		border: 1rpx solid rgba(226, 232, 240, 0.8);
		color: #475569;
		font-size: 28rpx;
		font-weight: 600;
		padding: 0;
		margin: 0;
		width: 68rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 18rpx;
		backdrop-filter: blur(20px);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	/* 深色主题下的返回按钮 */
	.app-container.theme-dark .app-back-btn,
	.app-container.theme-purple .app-back-btn,
	.app-container.theme-blue .app-back-btn {
		background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(71, 85, 105, 0.9) 100%);
		border-color: rgba(100, 116, 139, 0.5);
		color: #cbd5e1;
	}
	
	.app-back-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
		transition: left 0.6s ease;
	}
	
	.app-back-btn:hover {
		background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
		border-color: rgba(99, 102, 241, 0.3);
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 15rpx rgba(99, 102, 241, 0.15);
	}
	
	.app-back-btn:active {
		background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
		transform: translateY(1rpx) scale(0.96);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
	}
	
	.app-back-btn:active::before {
		left: 100%;
	}
	
	.app-title {
		font-size: 44rpx;
		font-weight: 800;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		letter-spacing: 1rpx;
	}
	
	.nav-right {
		position: relative;
	}
	
	.login-section {
		display: flex;
		align-items: center;
	}
	
	.login-btn {
		background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
		color: white;
		border: none;
		border-radius: 16rpx;
		padding: 24rpx 48rpx;
		font-size: 30rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.25);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(10px);
		letter-spacing: 1rpx;
	}
	
	.login-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
		transition: left 0.6s ease;
	}
	
	.login-btn:active {
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 2rpx 12rpx rgba(99, 102, 241, 0.35);
	}
	
	.login-btn:active::before {
		left: 100%;
	}
	
	.login-btn:hover {
		background: linear-gradient(135deg, #5b5ff0 0%, #8049f5 100%);
		box-shadow: 0 6rpx 25rpx rgba(99, 102, 241, 0.35);
		transform: translateY(-2rpx);
	}
	
	.user-section {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.08);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 15rpx var(--shadow-color);
	}
	
	.user-section:active {
		background: rgba(255, 255, 255, 0.12);
		transform: translateY(1rpx);
	}
	
	.user-avatar {
		width: 68rpx;
		height: 68rpx;
		border-radius: 34rpx;
		margin-right: 20rpx;
		border: 3rpx solid var(--primary-color);
		box-shadow: 0 4rpx 15rpx var(--shadow-color);
	}
	
	.username {
		color: var(--text-primary);
		font-size: 28rpx;
		margin-right: 12rpx;
		max-width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.dropdown-arrow {
		color: var(--text-secondary);
		font-size: 20rpx;
		transition: transform 0.3s ease;
	}
	
	.dropdown-arrow.rotated {
		transform: rotate(180deg);
	}
	
	.user-dropdown {
		position: absolute;
		top: 100%;
		right: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20rpx) saturate(180%);
		-webkit-backdrop-filter: blur(20rpx) saturate(180%);
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		border-radius: 32rpx;
		box-shadow: 
			0 20rpx 60rpx rgba(0, 0, 0, 0.15),
			0 8rpx 24rpx rgba(0, 0, 0, 0.08),
			0 4rpx 12rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
		min-width: 420rpx;
		width: 420rpx;
		z-index: 100;
		margin-top: 16rpx;
		animation: dropdownSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: all 0.3s ease;
	}
	
	/* 深色主题下的下拉框 */
	.app-container.theme-dark .user-dropdown,
	.app-container.theme-purple .user-dropdown,
	.app-container.theme-blue .user-dropdown {
		background: rgba(40, 44, 52, 0.95);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 
			0 20rpx 60rpx rgba(0, 0, 0, 0.4),
			0 8rpx 24rpx rgba(0, 0, 0, 0.2),
			0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	@keyframes dropdownSlideIn {
		from {
			opacity: 0;
			transform: translateY(-20rpx) scale(0.9);
			filter: blur(10rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
			filter: blur(0);
		}
	}
	
	.dropdown-header {
		display: flex;
		align-items: center;
		padding: 32rpx 28rpx;
		background: rgba(248, 250, 252, 0.8);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
	}
	
	/* 深色主题下的头部 */
	.app-container.theme-dark .dropdown-header,
	.app-container.theme-purple .dropdown-header,
	.app-container.theme-blue .dropdown-header {
		background: rgba(55, 65, 81, 0.6);
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.dropdown-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 24rpx;
		border: 3rpx solid var(--primary-color);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.dropdown-user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.dropdown-username {
		color: #1f2937;
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 6rpx;
		text-shadow: none;
	}
	
	/* 深色主题下的用户名 */
	.app-container.theme-dark .dropdown-username,
	.app-container.theme-purple .dropdown-username,
	.app-container.theme-blue .dropdown-username {
		color: #f9fafb;
	}
	
	.dropdown-main {
		padding: 24rpx 20rpx;
	}
	
	.dropdown-row {
		display: flex;
		margin-bottom: 16rpx;
		gap: 12rpx;
	}
	
	.dropdown-item-card {
		flex: 1;
		background: rgba(255, 255, 255, 0.8);
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		padding: 20rpx 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.2s ease;
		cursor: pointer;
		min-height: 100rpx;
		position: relative;
		backdrop-filter: blur(10rpx);
	}
	
	/* 深色主题下的卡片 */
	.app-container.theme-dark .dropdown-item-card,
	.app-container.theme-purple .dropdown-item-card,
	.app-container.theme-blue .dropdown-item-card {
		background: rgba(55, 65, 81, 0.6);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.dropdown-item-card:active {
		transform: scale(0.96);
		background: rgba(243, 244, 246, 0.9);
	}
	
	/* 深色主题下的卡片按压效果 */
	.app-container.theme-dark .dropdown-item-card:active,
	.app-container.theme-purple .dropdown-item-card:active,
	.app-container.theme-blue .dropdown-item-card:active {
		background: rgba(75, 85, 99, 0.8);
	}
	
	.card-icon {
		font-size: 36rpx;
		margin-bottom: 8rpx;
		line-height: 1;
	}
	
	.card-text {
		font-size: 24rpx;
		font-weight: 600;
		color: #374151;
		line-height: 1.2;
	}
	
	/* 深色主题下的卡片文字 */
	.app-container.theme-dark .card-text,
	.app-container.theme-purple .card-text,
	.app-container.theme-blue .card-text {
		color: #e5e7eb;
	}
	
	.card-badge {
		position: absolute;
		top: -4rpx;
		right: -4rpx;
		background: var(--primary-color);
		color: white;
		font-size: 20rpx;
		font-weight: 600;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		min-width: 60rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}
	
	.logout-card {
		background: rgba(254, 242, 242, 0.8) !important;
		border-color: rgba(239, 68, 68, 0.2) !important;
	}
	
	.logout-card .card-text {
		color: #ef4444 !important;
	}
	
	.logout-card:active {
		background: rgba(254, 226, 226, 0.9) !important;
	}
	
	/* 深色主题下的退出登录卡片 */
	.app-container.theme-dark .logout-card,
	.app-container.theme-purple .logout-card,
	.app-container.theme-blue .logout-card {
		background: rgba(127, 29, 29, 0.3) !important;
		border-color: rgba(239, 68, 68, 0.4) !important;
	}
	
	/* 主内容区域 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
		margin-left: 0; /* 完全去除侧边栏缩进 */
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		min-height: calc(100vh - 120rpx); /* 减去导航栏高度 */
	}
	
	/* 当输入框聚焦或有消息时的布局 */
	.main-content.input-focused,
	.main-content.has-messages {
		justify-content: flex-start;
		align-items: stretch;
		padding-bottom: 200rpx; /* 为固定输入框留出空间 */
	}
	
	/* 欢迎区域 */
	.welcome-section {
		text-align: center;
		padding: 60rpx 40rpx 40rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.welcome-section::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(16, 163, 127, 0.05) 0%, transparent 70%);
		animation: float 6s ease-in-out infinite;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-20rpx) rotate(180deg); }
	}
	
	.welcome-icon {
		font-size: 140rpx;
		margin-bottom: 50rpx;
		display: inline-block;
		animation: bounce 2s ease-in-out infinite;
		filter: drop-shadow(0 10rpx 20rpx rgba(16, 163, 127, 0.3));
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
		40% { transform: translateY(-10rpx); }
		60% { transform: translateY(-5rpx); }
	}
	
	.welcome-title {
		color: var(--text-primary);
		font-size: 48rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.welcome-subtitle {
		color: var(--text-secondary);
		font-size: 28rpx;
		line-height: 1.5;
		display: block;
	}
	
	/* 对话输入区域 */
	.chat-section {
		padding: 20rpx 40rpx 40rpx;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		transition: all 0.3s ease;
	}
	
	/* 输入框固定到底部 */
	.chat-section.bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: transparent; /* 移除遮挡背景 */
		padding: 30rpx 40rpx 50rpx; /* 增加上下内边距 */
		margin: 0;
		z-index: 200; /* 提高层级确保不被遮挡 */
		min-height: 200rpx; /* 设置最小高度 */
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); /* 添加顶部阴影 */
	}
	
	/* 深色主题下的输入框背景 */
	.app-container.theme-dark .chat-section.bottom-fixed,
	.app-container.theme-purple .chat-section.bottom-fixed,
	.app-container.theme-blue .chat-section.bottom-fixed {
		background: transparent; /* 移除深色主题遮挡背景 */
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 安全区域适配 */
	.chat-section.bottom-fixed {
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom)); /* iOS < 11.2 */
	}
	
	.input-container {
		display: flex;
		flex-direction: column;
		background: rgba(255, 255, 255, 0.85); /* 降低背景不透明度 */
		backdrop-filter: blur(10rpx); /* 减少模糊强度 */
		border-radius: 20rpx;
		padding: 20rpx;
		border: 1rpx solid var(--border-color);
		box-shadow: 0 8rpx 24rpx var(--shadow-color);
		transition: all 0.3s ease;
		width: 100%;
		max-width: 600rpx;
		gap: 16rpx;
	}
	
	/* 主输入框包装器 */
	.input-wrapper {
		display: flex;
		align-items: flex-end;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 16rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.12);
		padding: 8rpx 12rpx 8rpx 20rpx;
		transition: all 0.3s ease;
		min-height: 80rpx;
	}
	
	.input-wrapper:focus-within {
		background: rgba(255, 255, 255, 0.12);
		border-color: var(--primary-color);
		box-shadow: 0 0 0 2rpx rgba(16, 163, 127, 0.2);
	}
	
	/* 第一层：输入框 */
	.input-layer {
		width: 100%;
	}
	
	/* 第二层：功能按钮 */
	.function-layer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	/* 旧的功能按钮样式（已弃用）
	.function-buttons {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}
	
	.function-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.35);
		position: relative;
		overflow: hidden;
	}
	
	.function-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}
	
	.function-btn:hover::before {
		left: 100%;
	}
	
	.function-btn:active {
		transform: scale(0.9);
		box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.25);
	}
	
	.function-btn:hover {
		transform: translateY(-4rpx) scale(1.05);
		box-shadow: 0 15rpx 35rpx rgba(102, 126, 234, 0.5);
	}
	
	.upload-image-btn {
		background: linear-gradient(135deg, #ff7eb3 0%, #ff758c 100%);
		box-shadow: 0 8rpx 25rpx rgba(255, 126, 179, 0.4);
	}
	
	.upload-image-btn:hover {
		box-shadow: 0 15rpx 35rpx rgba(255, 126, 179, 0.6);
	}
	
	.upload-file-btn {
		background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
		box-shadow: 0 8rpx 25rpx rgba(54, 209, 220, 0.4);
	}
	
	.upload-file-btn:hover {
		box-shadow: 0 15rpx 35rpx rgba(54, 209, 220, 0.6);
	}
	*/
	
	.function-icon {
		font-size: 32rpx;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		z-index: 1;
		position: relative;
	}
	
	/* 旧的发送按钮样式（已弃用）
	.send-button-new {
		margin-right: 0px;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #6c63ff, #5a52ff);
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 6rpx 20rpx rgba(108, 99, 255, 0.4);
		font-size: 28rpx;
	}
	
	.send-button-new:disabled {
		background: linear-gradient(135deg, #e0e0e0, #bdbdbd) !important;
		color: #757575 !important;
		cursor: not-allowed;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
		transform: none !important;
	}
	
	.send-button-new.active {
		background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
		transform: scale(1.1) translateY(-6rpx);
		box-shadow: 0 20rpx 40rpx rgba(79, 195, 247, 0.6);
		animation: pulse 2s infinite;
	}
	
	.send-button-new.sending {
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
		transform: scale(1.05);
		box-shadow: 0 15rpx 35rpx rgba(255, 152, 0, 0.5);
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg) scale(1.05); }
		100% { transform: rotate(360deg) scale(1.05); }
	}
	
	.send-button-new:active {
		transform: scale(0.96);
	}
	*/
	
	.input-container:focus-within {
		border-color: var(--primary-color);
		box-shadow: 0 15rpx 40rpx var(--shadow-color);
		transform: translateY(-2rpx);
	}
	
	.chat-input {
		flex: 1;
		background: transparent;
		color: var(--text-primary);
		font-size: 28rpx;
		border: none;
		outline: none;
		padding: 12rpx 8rpx;
		min-height: 60rpx;
		max-height: 200rpx;
		line-height: 1.4;
		word-wrap: break-word;
		word-break: break-all;
		resize: none;
		overflow-y: auto;
	}
	
	.chat-input::placeholder {
		color: var(--text-secondary);
	}
	
	/* 内联发送按钮 */
	.send-button-inline {
		width: 56rpx;
		height: 56rpx;
		border-radius: 12rpx;
		background: rgba(156, 163, 175, 0.3);
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		color: var(--text-secondary);
		cursor: pointer;
		flex-shrink: 0;
		margin-bottom: 4rpx;
	}
	
	.send-button-inline:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}
	
	.send-button-inline.active {
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		color: white;
		transform: scale(1.05);
		box-shadow: 0 4rpx 12rpx rgba(16, 163, 127, 0.3);
	}
	
	.send-button-inline.sending {
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
		animation: pulse 1.5s infinite;
	}
	
	.send-button-inline:active {
		transform: scale(0.95);
	}
	
	@keyframes pulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.1); }
	}
	
	/* 功能按钮行 */
	.function-buttons-row {
		display: flex;
		gap: 12rpx;
		justify-content: flex-start;
		align-items: center;
		padding: 8rpx 0 0 0;
	}
	
	/* 紧凑型功能按钮 */
	.function-btn-compact {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 16rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 0.08);
		border: 1rpx solid rgba(255, 255, 255, 0.12);
		transition: all 0.3s ease;
		cursor: pointer;
		min-width: 80rpx;
	}
	
	.function-btn-compact:hover {
		background: rgba(255, 255, 255, 0.15);
		transform: translateY(-1rpx);
	}
	
	.function-btn-compact:active {
		transform: translateY(0) scale(0.96);
		background: rgba(255, 255, 255, 0.2);
	}
	
	.function-icon-compact {
		font-size: 24rpx;
		line-height: 1;
		position: relative;
		color: transparent; /* 隐藏原来的乱码 */
	}
	
	/* 上传图片按钮图标 */
	.upload-image-btn .function-icon-compact::before {
		content: "🖼️";
		font-size: 24rpx;
		position: absolute;
		top: 0;
		left: 0;
		color: var(--text-secondary);
	}
	
	/* 上传文件按钮图标 */
	.upload-file-btn .function-icon-compact::before {
		content: "📁";
		font-size: 24rpx;
		position: absolute;
		top: 0;
		left: 0;
		color: var(--text-secondary);
	}
	
	.function-text {
		font-size: 22rpx;
		color: var(--text-secondary);
		font-weight: 500;
	}
	
	/* 上传图片按钮特殊样式 */
	.upload-image-btn.function-btn-compact:hover {
		background: rgba(255, 126, 179, 0.15);
		border-color: rgba(255, 126, 179, 0.3);
	}
	
	.upload-image-btn.function-btn-compact:hover .function-text {
		color: #ff7eb3;
	}
	
	/* 上传文件按钮特殊样式 */
	.upload-file-btn.function-btn-compact:hover {
		background: rgba(54, 209, 220, 0.15);
		border-color: rgba(54, 209, 220, 0.3);
	}
	
	.upload-file-btn.function-btn-compact:hover .function-text {
		color: #36d1dc;
	}
	
	/* 深色主题下的输入容器样式 */
	.app-container.theme-dark .input-container,
	.app-container.theme-purple .input-container,
	.app-container.theme-blue .input-container {
		background: rgba(40, 44, 52, 0.85); /* 深色主题下的背景 */
		backdrop-filter: blur(10rpx); /* 减少模糊强度 */
	}
	
	/* 深色主题下的输入框样式 */
	.app-container.theme-dark .input-wrapper,
	.app-container.theme-purple .input-wrapper,
	.app-container.theme-blue .input-wrapper {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(255, 255, 255, 0.08);
	}
	
	.app-container.theme-dark .input-wrapper:focus-within,
	.app-container.theme-purple .input-wrapper:focus-within,
	.app-container.theme-blue .input-wrapper:focus-within {
		background: rgba(255, 255, 255, 0.08);
	}
	
	.app-container.theme-dark .function-btn-compact,
	.app-container.theme-purple .function-btn-compact,
	.app-container.theme-blue .function-btn-compact {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(255, 255, 255, 0.08);
	}
	
	.app-container.theme-dark .function-btn-compact:hover,
	.app-container.theme-purple .function-btn-compact:hover,
	.app-container.theme-blue .function-btn-compact:hover {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.send-button {
		width: 72rpx;
		height: 72rpx;
		border-radius: 20rpx;
		background: linear-gradient(135deg, rgba(156, 163, 175, 0.6) 0%, rgba(107, 114, 128, 0.6) 100%);
		border: 1rpx solid rgba(156, 163, 175, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		backdrop-filter: blur(10px);
		position: relative;
		overflow: hidden;
	}
	
	.send-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	.send-button.active {
		background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
		border-color: rgba(99, 102, 241, 0.5);
		box-shadow: 0 4rpx 15rpx rgba(99, 102, 241, 0.3);
		transform: translateY(-1rpx) scale(1.02);
		color: white;
	}
	
	.send-button.active::before {
		opacity: 1;
	}
	
	.send-button:disabled {
		opacity: 0.4;
		transform: scale(1);
		pointer-events: none;
	}
	
	.send-button:active {
		transform: translateY(1rpx) scale(0.98);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
	}
	
	/* 消息列表 */
	.messages-container {
		flex: 1;
		overflow: hidden;
		padding: 0.625rem 1.25rem 4.75rem; /* 增加底部内边距，确保不被输入框遮挡 */
		background: transparent; /* 移除背景，避免遮挡 */
		width: 100%;
		height: calc(100vh - 140rpx); /* 调整高度计算 */
		position: relative;
		z-index: 1;
	}
	
	.messages-list {
		height: 100%;
		padding: 40rpx 0;
		scroll-behavior: smooth; /* 平滑滚动 */
		overflow-y: auto; /* 确保可以滚动 */
	}
	
	.message-item {
		margin-bottom: 40rpx;
		animation: messageSlideIn 0.3s ease-out;
	}
	
	@keyframes messageSlideIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.user-message {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 8rpx;
	}
	
	.ai-message {
		display: flex;
		align-items: flex-start;
	}
	
	.message-content {
		min-width: 200rpx;
		max-width: 85%;
		width: fit-content;
		padding: 32rpx 36rpx;
		border-radius: 24rpx;
		position: relative;
		backdrop-filter: blur(20px);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		word-wrap: break-word;
		word-break: break-word;
		white-space: pre-wrap;
		overflow-wrap: break-word;
	}
	
	.message-content:hover {
		transform: translateY(-1rpx);
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.12);
	}
	
	/* 用户消息样式 - 柔和的蓝色渐变 */
	.user-content {
		background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
		color: #ffffff;
		border-bottom-right-radius: 8rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}
	
	.user-content::after {
		content: '';
		position: absolute;
		right: -8rpx;
		bottom: 8rpx;
		width: 0;
		height: 0;
		border-left: 14rpx solid rgba(139, 92, 246, 0.9);
		border-top: 6rpx solid transparent;
		border-bottom: 6rpx solid transparent;
	}
	
	/* AI消息样式 - 温和的灰色渐变 */
	.ai-content {
		background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
		color: #1e293b;
		border: 1rpx solid rgba(226, 232, 240, 0.8);
		border-bottom-left-radius: 8rpx;
	}
	
	.ai-content::after {
		content: '';
		position: absolute;
		left: -8rpx;
		bottom: 8rpx;
		width: 0;
		height: 0;
		border-right: 14rpx solid rgba(241, 245, 249, 0.95);
		border-top: 6rpx solid transparent;
		border-bottom: 6rpx solid transparent;
	}
	
	/* 深色主题下的AI消息 */
	.app-container.theme-dark .ai-content,
	.app-container.theme-purple .ai-content,
	.app-container.theme-blue .ai-content {
		background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.95) 100%);
		color: #e2e8f0;
		border: 1rpx solid rgba(100, 116, 139, 0.3);
	}
	
	.app-container.theme-dark .ai-content::after,
	.app-container.theme-purple .ai-content::after,
	.app-container.theme-blue .ai-content::after {
		border-right-color: rgba(71, 85, 105, 0.95);
	}
	
	.message-text {
		font-size: 28rpx;
		line-height: 1.7;
		word-wrap: break-word;
		word-break: break-word;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		font-weight: 400;
		letter-spacing: 0.5rpx;
		display: block;
		min-height: 1.7em;
	}
	
	/* 短消息优化 - 当内容较少时左对齐显示 */
	.short-message {
		max-width: 400rpx !important;
		text-align: left;
	}
	
	.short-message .message-text {
		text-align: left;
		overflow: visible;
	}
	
	.short-message .message-actions {
		justify-content: center;
	}
	
	/* 针对短文本的特殊样式 */
	@media (max-width: 750px) {
		.message-content {
			min-width: 160rpx;
		}
		
		.short-message {
			max-width: 20rem !important;
		}
	}
	
	/* 消息分隔线 */
	.message-divider {
		width: 100%;
		height: 1rpx;
		background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.1) 80%, transparent 100%);
		margin: 16rpx 0 12rpx 0;
	}
	
	/* 用户消息中的分隔线 */
	.user-content .message-divider {
		background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 80%, transparent 100%);
	}
	
	/* 深色主题下的分隔线 */
	.app-container.theme-dark .ai-content .message-divider,
	.app-container.theme-purple .ai-content .message-divider,
	.app-container.theme-blue .ai-content .message-divider {
		background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
	}
	
	/* 消息操作按钮容器 */
	.message-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 8rpx;
		gap: 12rpx;
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	
	/* 操作按钮基础样式 - 简洁圆形设计 */
	.action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.9);
		border: none;
		border-radius: 50%;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
	}
	
	.action-btn:hover {
		transform: translateY(-2rpx) scale(1.08);
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.15);
	}
	
	.action-btn:active {
		transform: translateY(0) scale(0.95);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.action-btn .action-icon {
		font-size: 28rpx;
		line-height: 1;
		transition: all 0.2s ease;
		font-weight: 400;
		color: #6b7280;
	}
	
	/* 按钮水波纹效果 */
	.action-btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.4);
		transition: width 0.3s ease, height 0.3s ease;
		transform: translate(-50%, -50%);
	}
	
	.action-btn:hover::before {
		width: 100%;
		height: 100%;
	}
	
	/* 用户消息中的操作按钮 */
	.user-content .action-btn {
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}
	
	.user-content .action-btn:hover {
		background: rgba(255, 255, 255, 0.35);
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.25);
	}
	
	.user-content .action-btn .action-icon {
		color: rgba(255, 255, 255, 0.9);
	}
	
	/* AI消息中的操作按钮 */
	.ai-content .action-btn {
		background: rgba(248, 250, 252, 0.9);
		border: 1rpx solid rgba(226, 232, 240, 0.8);
	}
	
	.ai-content .action-btn:hover {
		background: rgba(255, 255, 255, 1);
		border-color: rgba(203, 213, 225, 0.8);
	}
	
	/* 复制按钮特殊样式 */
	.copy-btn:hover {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
		border-color: rgba(34, 197, 94, 0.2);
	}
	
	.copy-btn:hover .action-icon {
		color: #16a34a;
		transform: scale(1.1);
	}
	
	/* 复制入框按钮特殊样式 */
	.copy-to-input-btn:hover {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
		border-color: rgba(59, 130, 246, 0.2);
	}
	
	.copy-to-input-btn:hover .action-icon {
		color: #2563eb;
		transform: scale(1.1) rotate(-15deg);
	}
	
	/* 收藏按钮特殊样式 */
	.favorite-btn:hover {
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
		border-color: rgba(239, 68, 68, 0.2);
	}
	
	.favorite-btn:hover .action-icon {
		transform: scale(1.2);
	}
	
	/* 已收藏状态 */
	.favorite-btn.favorited {
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%);
		border-color: rgba(239, 68, 68, 0.3);
		animation: heartGlow 2s ease-in-out infinite alternate;
	}
	
	@keyframes heartGlow {
		0% { box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.2); }
		100% { box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.4); }
	}
	
	/* 收藏按钮激活动画 */
	.favorite-btn .action-icon {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}
	
	.favorite-btn:active .action-icon {
		transform: scale(1.3);
		animation: heartPulse 0.6s ease-in-out;
	}
	
	@keyframes heartPulse {
		0% { transform: scale(1); }
		25% { transform: scale(1.1); }
		50% { transform: scale(1.3); }
		75% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}
	
	/* 外部操作按钮 - 位于消息框外部 */
	.external-action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0.9);
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		border-radius: 50%;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
		margin-top: 16rpx;
		opacity: 0.6;
	}
	
	.external-action-btn:hover {
		opacity: 1;
		transform: translateY(-1rpx) scale(1.1);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}
	
	.external-action-btn:active {
		transform: translateY(0) scale(0.95);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.external-action-btn .external-action-icon {
		font-size: 20rpx;
		line-height: 1;
		transition: all 0.2s ease;
		color: #6b7280;
	}
	
	/* 复制入框外部按钮特殊样式 */
	.copy-to-input-external:hover {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
		border-color: rgba(59, 130, 246, 0.2);
	}
	
	.copy-to-input-external:hover .external-action-icon {
		color: #2563eb;
		transform: scale(1.1) rotate(-15deg);
	}
	
	/* 深色主题下的外部按钮 */
	.app-container.theme-dark .external-action-btn,
	.app-container.theme-purple .external-action-btn,
	.app-container.theme-blue .external-action-btn {
		background: rgba(71, 85, 105, 0.8);
		border: 1rpx solid rgba(100, 116, 139, 0.3);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.app-container.theme-dark .external-action-btn:hover,
	.app-container.theme-purple .external-action-btn:hover,
	.app-container.theme-blue .external-action-btn:hover {
		background: rgba(71, 85, 105, 0.9);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}
	
	.app-container.theme-dark .external-action-btn .external-action-icon,
	.app-container.theme-purple .external-action-btn .external-action-icon,
	.app-container.theme-blue .external-action-btn .external-action-icon {
		color: #cbd5e1;
	}
	
	/* 深色主题下的复制入框外部按钮 */
	.app-container.theme-dark .copy-to-input-external:hover,
	.app-container.theme-purple .copy-to-input-external:hover,
	.app-container.theme-blue .copy-to-input-external:hover {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
		border-color: rgba(59, 130, 246, 0.3);
	}
	
	/* 深色主题下的操作按钮 */
	.app-container.theme-dark .action-btn,
	.app-container.theme-purple .action-btn,
	.app-container.theme-blue .action-btn {
		background: rgba(71, 85, 105, 0.8);
		border: 1rpx solid rgba(100, 116, 139, 0.4);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
	}
	
	.app-container.theme-dark .action-btn:hover,
	.app-container.theme-purple .action-btn:hover,
	.app-container.theme-blue .action-btn:hover {
		background: rgba(71, 85, 105, 1);
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.4);
	}
	
	.app-container.theme-dark .action-btn .action-icon,
	.app-container.theme-purple .action-btn .action-icon,
	.app-container.theme-blue .action-btn .action-icon {
		color: #cbd5e1;
	}
	
	.app-container.theme-dark .user-content .action-btn,
	.app-container.theme-purple .user-content .action-btn,
	.app-container.theme-blue .user-content .action-btn {
		background: rgba(255, 255, 255, 0.15);
		border: 1rpx solid rgba(255, 255, 255, 0.25);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.app-container.theme-dark .user-content .action-btn:hover,
	.app-container.theme-purple .user-content .action-btn:hover,
	.app-container.theme-blue .user-content .action-btn:hover {
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.35);
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 用户消息文本样式 */
	.user-content .message-text {
		color: rgba(255, 255, 255, 0.95);
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}
	
	/* AI消息文本样式 */
	.ai-content .message-text {
		color: #334155;
	}
	
	/* 深色主题下的AI消息文本 */
	.app-container.theme-dark .ai-content .message-text,
	.app-container.theme-purple .ai-content .message-text,
	.app-container.theme-blue .ai-content .message-text {
		color: #cbd5e1;
	}
	
	.typing-indicator {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
		backdrop-filter: blur(20px);
		border-radius: 20rpx;
		border: 1rpx solid rgba(226, 232, 240, 0.6);
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 深色主题下的输入提示器 */
	.app-container.theme-dark .typing-indicator,
	.app-container.theme-purple .typing-indicator,
	.app-container.theme-blue .typing-indicator {
		background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(71, 85, 105, 0.9) 100%);
		border: 1rpx solid rgba(100, 116, 139, 0.4);
	}
	
	.typing-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
		margin-right: 6rpx;
		animation: typing 1.4s infinite ease-in-out;
		box-shadow: 0 1rpx 3rpx rgba(99, 102, 241, 0.3);
	}
	
	.typing-dot:nth-child(2) {
		animation-delay: 0.2s;
	}
	
	.typing-dot:nth-child(3) {
		animation-delay: 0.4s;
		margin-right: 0;
	}
	
	/* 深色主题下的输入点颜色调整 */
	.app-container.theme-dark .typing-dot,
	.app-container.theme-purple .typing-dot,
	.app-container.theme-blue .typing-dot {
		background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
		box-shadow: 0 1rpx 3rpx rgba(129, 140, 248, 0.4);
	}
	
	@keyframes typing {
		0%, 80%, 100% {
			opacity: 0.4;
			transform: scale(0.8);
		}
		40% {
			opacity: 1;
			transform: scale(1.2);
		}
	}
	
	/* 登录弹窗 */
	.login-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.login-modal {
		background: #202123;
		border-radius: 24rpx;
		width: 640rpx;
		max-width: 90%;
		overflow: hidden;
		animation: modalSlideIn 0.3s ease-out;
	}
	
	@keyframes modalSlideIn {
		from {
			transform: scale(0.9);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		border-bottom: 1rpx solid #4d4d4f;
	}
	
	/* 明亮主题下的弹窗头部 */
	.app-container.theme-light .modal-header {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	
	.modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #ffffff;
	}
	
	/* 明亮主题下的弹窗标题 */
	.app-container.theme-light .modal-title {
		color: #1f2937;
	}
	
	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		transition: background-color 0.2s;
	}
	
	.close-btn:active {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.close-icon {
		font-size: 32rpx;
		color: #8e8ea0;
	}
	
	/* 明亮主题下的关闭图标 */
	.app-container.theme-light .close-icon {
		color: #6b7280;
	}
	
	.modal-body {
		padding: 40rpx;
	}
	
	.input-group {
		margin-bottom: 32rpx;
	}
	
	.input-field {
		width: 100%;
		height: 96rpx;
		border: 2rpx solid #4d4d4f;
		border-radius: 16rpx;
		padding: 0 32rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		background: #40414f;
		color: #ffffff;
		transition: border-color 0.2s;
	}
	
	.input-field:focus {
		border-color: #10a37f;
		outline: none;
	}
	
	.input-field::placeholder {
		color: #8e8ea0;
	}
	
	.login-button {
		width: 100%;
		height: 96rpx;
		background: #10a37f;
		color: white;
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 32rpx;
		transition: opacity 0.2s;
	}
	
	.login-button:disabled {
		opacity: 0.5;
	}
	
	.login-button.loading {
		opacity: 0.8;
	}
	
	.login-footer {
		margin-top: 40rpx;
		text-align: center;
	}
	
	.footer-text {
		font-size: 24rpx;
		color: #8e8ea0;
		line-height: 1.5;
	}
	
	/* 主题选择弹窗 */
	.theme-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1002;
		backdrop-filter: blur(20rpx);
		animation: overlayFadeIn 0.3s ease-out;
	}
	
	@keyframes overlayFadeIn {
		from {
			opacity: 0;
			backdrop-filter: blur(0);
		}
		to {
			opacity: 1;
			backdrop-filter: blur(20rpx);
		}
	}
	
	.theme-modal {
		background: var(--bg-card);
		backdrop-filter: blur(60rpx) saturate(200%);
		-webkit-backdrop-filter: blur(60rpx) saturate(200%);
		border: 1rpx solid var(--border-color);
		border-radius: 40rpx;
		width: 820rpx;
		max-width: 92%;
		max-height: 85vh;
		overflow: hidden;
		animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 
			0 40rpx 120rpx var(--shadow-color),
			0 20rpx 60rpx var(--shadow-color),
			0 8rpx 32rpx var(--shadow-color),
			inset 0 2rpx 0 rgba(255, 255, 255, 0.2),
			inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);
		position: relative;
	}
	
	/* 明亮主题下的主题选择弹窗 */
	.app-container.theme-light .theme-modal {
		background: rgba(255, 255, 255, 0.95);
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		box-shadow: 
			0 40rpx 120rpx rgba(0, 0, 0, 0.15),
			0 20rpx 60rpx rgba(0, 0, 0, 0.08),
			0 8rpx 32rpx rgba(0, 0, 0, 0.05);
	}
	
	.theme-modal::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.15) 0%, 
			rgba(255, 255, 255, 0.08) 30%, 
			rgba(255, 255, 255, 0.03) 70%, 
			rgba(255, 255, 255, 0.1) 100%);
		border-radius: 40rpx;
		pointer-events: none;
		z-index: -1;
	}
	
	.theme-options {
		padding: 48rpx 40rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
	}
	
	.theme-option {
		background: rgba(255, 255, 255, 0.08);
		backdrop-filter: blur(20rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		border-radius: 28rpx;
		padding: 40rpx 28rpx;
		text-align: center;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		position: relative;
		overflow: hidden;
		box-shadow: 
			0 8rpx 32rpx rgba(0, 0, 0, 0.1),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
	}
	
	/* 明亮主题下的主题选择项 */
	.app-container.theme-light .theme-option {
		background: rgba(255, 255, 255, 0.8);
		border: 2rpx solid rgba(0, 0, 0, 0.08);
		box-shadow: 
			0 8rpx 32rpx rgba(0, 0, 0, 0.08),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
	}
	
	.app-container.theme-light .theme-option:hover {
		background: rgba(255, 255, 255, 0.9);
		border-color: rgba(0, 0, 0, 0.12);
		box-shadow: 
			0 16rpx 48rpx rgba(0, 0, 0, 0.12),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
	}
	
	.app-container.theme-light .theme-option.active {
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 
			0 20rpx 60rpx rgba(0, 0, 0, 0.15),
			0 8rpx 32rpx var(--primary-color),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
	}
	
	.theme-option::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		opacity: 0;
		transition: opacity 0.4s ease;
		border-radius: 26rpx;
	}
	
	.theme-option:hover {
		transform: translateY(-4rpx);
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.2);
		box-shadow: 
			0 16rpx 48rpx rgba(0, 0, 0, 0.2),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.15);
	}
	
	.theme-option.active {
		border-color: var(--primary-color);
		background: rgba(255, 255, 255, 0.15);
		transform: translateY(-6rpx);
		box-shadow: 
			0 20rpx 60rpx var(--shadow-color),
			0 8rpx 32rpx var(--primary-color),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
	}
	
	.theme-option.active::before {
		opacity: 0.15;
	}
	
	.theme-option:active {
		transform: translateY(-2rpx) scale(0.98);
	}
	
	.theme-preview {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 0 auto 24rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 1;
		box-shadow: 
			0 8rpx 32rpx rgba(0, 0, 0, 0.2),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
	}
	
	.theme-option.active .theme-preview {
		border-color: rgba(255, 255, 255, 0.6);
		box-shadow: 
			0 12rpx 40rpx rgba(0, 0, 0, 0.3),
			0 4rpx 16rpx var(--primary-color),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.3);
		transform: scale(1.1);
	}
	
	.theme-preview-purple {
		background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c084fc 100%);
		box-shadow: 
			0 8rpx 32rpx rgba(139, 92, 246, 0.3),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
	}
	
	.theme-preview-dark {
		background: linear-gradient(135deg, #10a37f 0%, #1db584 50%, #34d399 100%);
		box-shadow: 
			0 8rpx 32rpx rgba(16, 163, 127, 0.3),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
	}
	
	.theme-preview-light {
		background: linear-gradient(135deg, #0969da 0%, #218bff 50%, #60a5fa 100%);
		box-shadow: 
			0 8rpx 32rpx rgba(9, 105, 218, 0.3),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
	}
	
	.theme-preview-blue {
		background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
		box-shadow: 
			0 8rpx 32rpx rgba(14, 165, 233, 0.3),
			inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
	}
	
	.theme-name {
		color: var(--text-primary);
		font-size: 34rpx;
		font-weight: 700;
		display: block;
		margin-bottom: 12rpx;
		position: relative;
		z-index: 1;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		letter-spacing: 0.5rpx;
	}
	
	/* 明亮主题下的主题名称 */
	.app-container.theme-light .theme-name {
		color: #1f2937;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
	}
	
	.theme-desc {
		color: var(--text-secondary);
		font-size: 26rpx;
		font-weight: 500;
		line-height: 1.5;
		position: relative;
		z-index: 1;
		text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
		opacity: 0.9;
	}
	
	/* 明亮主题下的主题描述 */
	.app-container.theme-light .theme-desc {
		color: #6b7280;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	}
	
	/* =============== 删除确认弹窗样式 =============== */
	.delete-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1004;
		backdrop-filter: blur(25rpx);
		animation: overlayFadeIn 0.3s ease-out;
	}
	
	.delete-modal {
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
		backdrop-filter: blur(40rpx) saturate(180%);
		-webkit-backdrop-filter: blur(40rpx) saturate(180%);
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		border-radius: 24rpx;
		width: 520rpx;
		max-width: 88%;
		box-shadow: 
			0 25rpx 50rpx rgba(0, 0, 0, 0.15),
			0 15rpx 35rpx rgba(0, 0, 0, 0.1),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
		animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		position: relative;
		overflow: hidden;
	}
	
	/* 暗色主题下的弹窗 */
	.app-container.theme-dark .delete-modal,
	.app-container.theme-purple .delete-modal,
	.app-container.theme-blue .delete-modal {
		background: linear-gradient(145deg, rgba(45, 55, 72, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
		border: 2rpx solid rgba(255, 255, 255, 0.15);
		box-shadow: 
			0 25rpx 50rpx rgba(0, 0, 0, 0.3),
			0 15rpx 35rpx rgba(0, 0, 0, 0.2),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
	}
	
	.delete-modal::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.1) 0%, 
			transparent 50%, 
			rgba(255, 255, 255, 0.05) 100%);
		border-radius: 22rpx;
		pointer-events: none;
		z-index: 0;
	}
	
	.delete-modal .modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 24rpx;
		background: transparent;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 1;
	}
	
	/* 暗色主题下的头部 */
	.app-container.theme-dark .delete-modal .modal-header,
	.app-container.theme-purple .delete-modal .modal-header,
	.app-container.theme-blue .delete-modal .modal-header {
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.delete-modal .modal-title {
		color: #1f2937;
		font-size: 34rpx;
		font-weight: 700;
		text-shadow: none;
		letter-spacing: 0.5rpx;
		position: relative;
		z-index: 1;
	}
	
	/* 暗色主题下的标题 */
	.app-container.theme-dark .delete-modal .modal-title,
	.app-container.theme-purple .delete-modal .modal-title,
	.app-container.theme-blue .delete-modal .modal-title {
		color: #f8fafc;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
	}
	
	.delete-modal .close-btn {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background: rgba(107, 114, 128, 0.1);
		border: 1rpx solid rgba(107, 114, 128, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		cursor: pointer;
		backdrop-filter: blur(10rpx);
		position: relative;
		z-index: 1;
	}
	
	.delete-modal .close-btn:hover {
		background: rgba(107, 114, 128, 0.15);
		transform: scale(1.05);
		border-color: rgba(107, 114, 128, 0.3);
	}
	
	.delete-modal .close-btn:active {
		transform: scale(0.95);
	}
	
	.delete-modal .close-icon {
		font-size: 28rpx;
		color: #6b7280;
		font-weight: bold;
		text-shadow: none;
	}
	
	/* 暗色主题下的关闭图标 */
	.app-container.theme-dark .delete-modal .close-icon,
	.app-container.theme-purple .delete-modal .close-icon,
	.app-container.theme-blue .delete-modal .close-icon {
		color: #d1d5db;
	}
	
	.delete-modal .modal-body {
		padding: 32rpx 32rpx 40rpx;
		text-align: center;
		position: relative;
		z-index: 1;
	}
	
	.delete-modal .modal-content {
		color: #4b5563;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 1.6;
		text-shadow: none;
		margin-bottom: 32rpx;
	}
	
	/* 暗色主题下的内容文字 */
	.app-container.theme-dark .delete-modal .modal-content,
	.app-container.theme-purple .delete-modal .modal-content,
	.app-container.theme-blue .delete-modal .modal-content {
		color: #e5e7eb;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}
	
	.modal-actions {
		display: flex;
		gap: 16rpx;
		padding: 0 32rpx 32rpx;
		justify-content: center;
		position: relative;
		z-index: 1;
	}
	
	.cancel-btn,
	.confirm-btn {
		flex: 1;
		padding: 20rpx 32rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		border: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(10rpx);
		text-shadow: none;
		cursor: pointer;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.cancel-btn {
		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
		color: #374151;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(209, 213, 219, 0.8);
	}
	
	.cancel-btn:hover {
		background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
		transform: translateY(-1rpx);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
	}
	
	.cancel-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 暗色主题下的取消按钮 */
	.app-container.theme-dark .cancel-btn,
	.app-container.theme-purple .cancel-btn,
	.app-container.theme-blue .cancel-btn {
		background: linear-gradient(135deg, rgba(75, 85, 99, 0.8) 0%, rgba(55, 65, 81, 0.9) 100%);
		color: #e5e7eb;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}
	
	.app-container.theme-dark .cancel-btn:hover,
	.app-container.theme-purple .cancel-btn:hover,
	.app-container.theme-blue .cancel-btn:hover {
		background: linear-gradient(135deg, rgba(55, 65, 81, 0.9) 0%, rgba(31, 41, 55, 0.95) 100%);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.3);
	}
	
	.confirm-btn {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
		color: #ffffff;
		box-shadow: 0 4rpx 15rpx rgba(239, 68, 68, 0.4);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.confirm-btn:hover {
		background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
		transform: translateY(-1rpx);
		box-shadow: 0 6rpx 20rpx rgba(239, 68, 68, 0.5);
	}
	
	.confirm-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(239, 68, 68, 0.4);
	}
	
	/* 按钮波纹效果 */
	.cancel-btn::before,
	.confirm-btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: width 0.6s ease, height 0.6s ease;
		pointer-events: none;
	}
	
	.cancel-btn:active::before,
	.confirm-btn:active::before {
		width: 200rpx;
		height: 200rpx;
	}
	
	@keyframes modalSlideIn {
		from {
			opacity: 0;
			transform: scale(0.9) translateY(-50rpx);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}
	
	/* =============== 侧边栏样式 =============== */
	/* 侧边栏遮罩 */
	.sidebar-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(4rpx);
		z-index: 100;
		animation: overlayFadeIn 0.3s ease;
	}
	
	@keyframes overlayFadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* 侧边栏容器 */
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 500rpx;
		height: 100vh;
		background: var(--bg-card);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-right: 1rpx solid var(--border-color);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 200;
		display: flex;
		flex-direction: column;
		box-shadow: 4rpx 0 24rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}
	
	/* 侧边栏收起状态 */
	.sidebar-collapsed {
		width: 80rpx;
		border-radius: 0 20rpx 20rpx 0;
		height: fit-content;
		max-height: 80vh;
		top: 50%;
		transform: translateY(-50%);
		background: var(--bg-card);
		box-shadow: 8rpx 0 32rpx rgba(0, 0, 0, 0.15);
	}
	
	/* 侧边栏头部 */
	.sidebar-header {
		padding: 24rpx;
		border-bottom: 1rpx solid var(--border-color);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: var(--bg-secondary);
		min-height: 100rpx;
		flex-shrink: 0;
	}
	
	/* 收起状态下的头部样式 */
	.sidebar-collapsed .sidebar-header {
		padding: 16rpx;
		justify-content: center;
		min-height: 80rpx;
		border-bottom: none;
	}
	
	.sidebar-toggle-btn {
		width: 64rpx;
		height: 64rpx;
		border-radius: 16rpx;
		background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
		border: 1rpx solid rgba(226, 232, 240, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		backdrop-filter: blur(15px);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		position: relative;
		overflow: hidden;
	}
	
	/* 深色主题下的切换按钮 */
	.app-container.theme-dark .sidebar-toggle-btn,
	.app-container.theme-purple .sidebar-toggle-btn,
	.app-container.theme-blue .sidebar-toggle-btn {
		background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(71, 85, 105, 0.9) 100%);
		border-color: rgba(100, 116, 139, 0.4);
	}
	
	/* 收起状态下的切换按钮 */
	.sidebar-collapsed .sidebar-toggle-btn {
		width: 52rpx;
		height: 52rpx;
		border-radius: 14rpx;
	}
	
	.sidebar-toggle-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	.sidebar-toggle-btn:hover {
		background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
		border-color: rgba(99, 102, 241, 0.5);
		transform: translateY(-1rpx) scale(1.02);
		box-shadow: 0 4rpx 15rpx rgba(99, 102, 241, 0.2);
	}
	
	.sidebar-toggle-btn:hover::before {
		opacity: 1;
	}
	
	.sidebar-toggle-btn:active {
		transform: translateY(1rpx) scale(0.98);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
	}
	
	.sidebar-toggle-btn:hover .toggle-icon {
		color: white;
	}
	
	.toggle-icon {
		font-size: 28rpx;
		color: var(--text-primary);
		font-weight: bold;
		transition: color 0.2s ease;
	}
	
	/* 侧边栏内容 */
	.sidebar-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 24rpx 16rpx;
	}
	
	/* 收起状态下的内容区域 */
	.sidebar-collapsed .sidebar-content {
		padding: 16rpx 8rpx;
	}
	
	/* 功能按钮组 */
	.function-buttons {
		display: flex;
		flex-direction: row;
		gap: 12rpx;
		margin-bottom: 32rpx;
	}
	
	/* 收起状态下的按钮组 */
	.sidebar-collapsed .function-buttons {
		gap: 8rpx;
		margin-bottom: 16rpx;
	}
	
	.function-btn {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		border-radius: 16rpx;
		background: transparent;
		border: 1rpx solid var(--border-color);
		transition: all 0.2s ease;
		cursor: pointer;
		min-height: 80rpx;
		justify-content: flex-start;
		overflow: hidden;
	}
	
	/* 收起状态下按钮样式 */
	.sidebar-collapsed .function-btn {
		justify-content: center;
		padding: 12rpx;
		min-height: 64rpx;
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}
	
	.function-btn:hover {
		background: var(--bg-secondary);
		border-color: var(--primary-color);
	}
	
	.function-btn.new-chat:hover {
		background: var(--primary-color);
		color: white;
	}
	
	.btn-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	
	/* 收起状态下隐藏图标右边距 */
	.sidebar-collapsed .btn-icon {
		margin-right: 0;
		font-size: 28rpx;
	}
	
	.btn-text {
		font-size: 28rpx;
		color: var(--text-primary);
		font-weight: 500;
		flex: 1;
		text-align: left;
		transition: color 0.2s ease;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.function-btn:hover .btn-text {
		color: var(--text-primary);
	}
	
	.function-btn.new-chat:hover .btn-text {
		color: white;
	}
	
	/* 历史记录区域 */
	.history-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
		padding: 0 8rpx;
	}
	
	.title-text {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 600;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.4);
	}
	
	/* 明亮主题下的标题文字 */
	.app-container.theme-light .title-text {
		color: #111827 !important;
		text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.9) !important;
		font-weight: 700 !important;
	}
	
	/* 深色主题下的标题文字 */
	.app-container.theme-dark .title-text,
	.app-container.theme-purple .title-text,
	.app-container.theme-blue .title-text {
		color: #ffffff !important;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.8) !important;
		font-weight: 700 !important;
	}
	
	
	/* 历史记录列表 */
	.history-list {
		flex: 1;
		overflow-y: auto;
	}
	
	.empty-history {
		text-align: center;
		padding: 60rpx 20rpx;
	}
	
	.empty-text {
		color: #d1d5db;
		font-size: 24rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 明亮主题下的空文本 */
	.app-container.theme-light .empty-text {
		color: #4b5563 !important;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.7) !important;
		font-weight: 500 !important;
	}
	
	/* 深色主题下的空文本 */
	.app-container.theme-dark .empty-text,
	.app-container.theme-purple .empty-text,
	.app-container.theme-blue .empty-text {
		color: #e5e7eb !important;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5) !important;
		font-weight: 500 !important;
	}
	
	.history-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 12rpx;
		margin-bottom: 8rpx;
		border-radius: 12rpx;
		background: transparent;
		border: 1rpx solid transparent;
		transition: all 0.2s ease;
		cursor: pointer;
		position: relative;
	}
	
	.history-item.active {
		background: var(--primary-color);
		border-color: var(--primary-color);
	}
	
   .history-title {
	   flex: 1;
	   font-size: 32rpx;
	   color: #ffffff;
	   font-weight: 700;
	   letter-spacing: 1rpx;
	   overflow: hidden;
	   text-overflow: ellipsis;
	   white-space: nowrap;
	   margin-right: 12rpx;
	   transition: color 0.2s ease;
	   text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.4);
   }
	
   /* 明亮主题下高亮为黑色 */
   .app-container.theme-light .history-item.active .history-title {
	   color: #1e293b;
	   text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
   }
   /* 其他主题下高亮为白色 */
   .app-container.theme-dark .history-item.active .history-title,
   .app-container.theme-purple .history-item.active .history-title,
   .app-container.theme-blue .history-item.active .history-title {
	   color: #ffffff;
	   text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
   }
	
	/* 历史记录操作按钮组 */
	.history-actions {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.favorite-chat-btn,
	.delete-chat-btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.6;
		transition: all 0.2s ease;
		cursor: pointer;
	}
	
	.favorite-chat-btn:hover,
	.delete-chat-btn:hover {
		opacity: 1;
		transform: scale(1.1);
	}
	
	.favorite-icon {
		font-size: 20rpx;
		transition: color 0.2s ease;
	}
	
	.delete-icon {
		font-size: 20rpx;
		color: #ef4444;
		transition: color 0.2s ease;
	}
	
	/* 侧边栏内容 */
	.sidebar-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	/* 新对话按钮 */
	.new-chat-btn {
		margin: 24rpx 32rpx;
		padding: 24rpx;
		background: var(--primary-gradient);
		border: none;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
		transition: all 0.2s ease;
		box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.3);
	}
	
	.new-chat-icon {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
	}
	
	.new-chat-text {
		font-size: 32rpx;
		font-weight: 600;
		color: white;
	}
	
	/* 历史记录列表 */
	.history-list {
		flex: 1;
		padding: 0 16rpx;
	}
	
	.empty-history {
		padding: 80rpx 32rpx;
		text-align: center;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #d1d5db;
		opacity: 0.8;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 历史记录项 */
	.history-item {
		margin: 8rpx 16rpx;
		padding: 20rpx;
		background: var(--sidebar-item-bg);
		border: 1rpx solid var(--sidebar-item-border);
		border-radius: 12rpx;
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
		transition: all 0.2s ease;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	/* 明亮主题下的历史记录项 */
	.app-container.theme-light .history-item {
		background: rgba(255, 255, 255, 0.9);
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 深色主题下的历史记录项 */
	.app-container.theme-dark .history-item,
	.app-container.theme-purple .history-item,
	.app-container.theme-blue .history-item {
		background: rgba(0, 0, 0, 0.3);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}
	
	.history-item.active {
		background: var(--primary-color-light);
		border-color: var(--primary-color);
		box-shadow: 0 2rpx 8rpx rgba(139, 92, 246, 0.2);
	}
	
	.history-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		min-width: 0;
	}
	
	.history-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #ffffff;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 明亮主题下的历史标题 - 加强对比度 */
	.app-container.theme-light .history-title {
		color: #111827 !important;
		text-shadow: 0 1rpx 3rpx rgba(255, 255, 255, 0.9) !important;
		font-weight: 700 !important;
	}
	
	/* 深色主题下的历史标题 - 加强对比度 */
	.app-container.theme-dark .history-title,
	.app-container.theme-purple .history-title,
	.app-container.theme-blue .history-title {
		color: #ffffff !important;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.8) !important;
		font-weight: 700 !important;
	}
	
	.history-time {
		font-size: 22rpx;
		color: #e5e7eb;
		opacity: 0.8;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}
	
	/* 明亮主题下的历史时间 */
	.app-container.theme-light .history-time {
		color: #6b7280 !important;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.6) !important;
		font-weight: 500 !important;
	}
	
	/* 深色主题下的历史时间 */
	.app-container.theme-dark .history-time,
	.app-container.theme-purple .history-time,
	.app-container.theme-blue .history-time {
		color: #d1d5db !important;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.4) !important;
		font-weight: 500 !important;
	}
	
	.history-preview {
		font-size: 24rpx;
		color: var(--sidebar-text-secondary);
		line-height: 1.4;
		opacity: 0.8;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* 明亮主题下的历史预览 */
	.app-container.theme-light .history-preview {
		color: #374151 !important;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.7) !important;
		font-weight: 500 !important;
	}
	
	/* 深色主题下的历史预览 */
	.app-container.theme-dark .history-preview,
	.app-container.theme-purple .history-preview,
	.app-container.theme-blue .history-preview {
		color: #e5e7eb !important;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5) !important;
		font-weight: 500 !important;
	}
	
	.delete-chat-btn {
		width: 40rpx;
		height: 40rpx;
		background: transparent;
		border: none;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		opacity: 0.6;
	}
	
	.delete-chat-btn:hover {
		background: var(--danger-color);
		opacity: 1;
	}
	
	.delete-icon {
		font-size: 24rpx;
		color: var(--sidebar-text-secondary);
	}
	
	/* 明亮主题下的删除图标 */
	.app-container.theme-light .delete-icon {
		color: #ef4444;
	}
	
	/* 深色主题下的删除图标 */
	.app-container.theme-dark .delete-icon,
	.app-container.theme-purple .delete-icon,
	.app-container.theme-blue .delete-icon {
		color: #f87171;
	}
	
	/* =============== 账户管理弹窗样式 =============== */
	.account-modal {
		max-width: 700rpx;
	}
	
	.account-body {
		padding: 0;
	}
	
	.account-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
		cursor: pointer;
		transition: background-color 0.2s ease;
	}
	
	.account-item:last-child {
		border-bottom: none;
	}
	
	.account-item:hover {
		background: rgba(0, 0, 0, 0.02);
	}
	
	/* 深色主题下的账户项 */
	.app-container.theme-dark .account-item,
	.app-container.theme-purple .account-item,
	.app-container.theme-blue .account-item {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	
	.app-container.theme-dark .account-item:hover,
	.app-container.theme-purple .account-item:hover,
	.app-container.theme-blue .account-item:hover {
		background: rgba(255, 255, 255, 0.05);
	}
	
	.account-info {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.account-icon {
		font-size: 44rpx;
		margin-right: 24rpx;
	}
	
	.account-details {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.account-label {
		font-size: 30rpx;
		font-weight: 600;
		color: #1f2937;
		line-height: 1.2;
	}
	
	/* 深色主题下的账户标签 */
	.app-container.theme-dark .account-label,
	.app-container.theme-purple .account-label,
	.app-container.theme-blue .account-label {
		color: #f8fafc;
	}
	
	.account-value {
		font-size: 26rpx;
		color: #6b7280;
		line-height: 1.2;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* 深色主题下的账户值 */
	.app-container.theme-dark .account-value,
	.app-container.theme-purple .account-value,
	.app-container.theme-blue .account-value {
		color: #d1d5db;
	}
	
	.verify-status {
		font-size: 22rpx;
		color: #ef4444;
		line-height: 1.2;
		font-weight: 500;
	}
	
	.verify-status.verified {
		color: #10b981;
	}
	
	.account-arrow {
		font-size: 32rpx;
		color: #9ca3af;
		font-weight: bold;
	}
	
	/* 深色主题下的箭头 */
	.app-container.theme-dark .account-arrow,
	.app-container.theme-purple .account-arrow,
	.app-container.theme-blue .account-arrow {
		color: #6b7280;
	}
	
	/* 表单弹窗样式 */
	.phone-modal,
	.email-modal,
	.verify-modal {
		max-width: 600rpx;
	}
	
	.form-body {
		padding: 32rpx 40rpx;
	}
	
	.input-group {
		margin-bottom: 32rpx;
	}
	
	.input-label {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #374151;
		margin-bottom: 12rpx;
	}
	
	/* 深色主题下的输入标签 */
	.app-container.theme-dark .input-label,
	.app-container.theme-purple .input-label,
	.app-container.theme-blue .input-label {
		color: #f3f4f6;
	}
	
	.form-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid rgba(209, 213, 219, 0.6);
		border-radius: 16rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.9);
		color: #1f2937;
		transition: all 0.2s ease;
	}
	
	.form-input:focus {
		border-color: var(--primary-color);
		outline: none;
		box-shadow: 0 0 0 3rpx rgba(139, 92, 246, 0.1);
	}
	
	.form-input::placeholder {
		color: #9ca3af;
	}
	
	/* 深色主题下的表单输入 */
	.app-container.theme-dark .form-input,
	.app-container.theme-purple .form-input,
	.app-container.theme-blue .form-input {
		background: rgba(55, 65, 81, 0.9);
		border-color: rgba(75, 85, 99, 0.6);
		color: #f3f4f6;
	}
	
	.app-container.theme-dark .form-input::placeholder,
	.app-container.theme-purple .form-input::placeholder,
	.app-container.theme-blue .form-input::placeholder {
		color: #6b7280;
	}
	
	.code-input-group {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}
	
	.code-input {
		flex: 1;
	}
	
	.code-btn {
		flex-shrink: 0;
		height: 88rpx;
		padding: 0 24rpx;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		color: white;
		border: none;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 600;
		white-space: nowrap;
		transition: all 0.2s ease;
		min-width: 140rpx;
	}
	
	.code-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
	
	.code-btn:not(:disabled):hover {
		transform: translateY(-1rpx);
		box-shadow: 0 4rpx 12rpx rgba(139, 92, 246, 0.3);
	}
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
		color: white;
		border: none;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 16rpx;
		transition: all 0.2s ease;
		box-shadow: 0 4rpx 16rpx rgba(139, 92, 246, 0.2);
	}
	
	.submit-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
	
	.submit-btn:not(:disabled):hover {
		transform: translateY(-1rpx);
		box-shadow: 0 6rpx 20rpx rgba(139, 92, 246, 0.3);
	}
	
	.submit-btn:active {
		transform: translateY(1rpx);
	}
	
	/* 验证弹窗特殊样式 */
	.verify-tip {
		font-size: 28rpx;
		color: #6b7280;
		line-height: 1.6;
		margin-bottom: 16rpx;
		text-align: center;
	}
	
	/* 深色主题下的验证提示 */
	.app-container.theme-dark .verify-tip,
	.app-container.theme-purple .verify-tip,
	.app-container.theme-blue .verify-tip {
		color: #d1d5db;
	}
	
	.verify-target {
		font-size: 30rpx;
		font-weight: 600;
		color: var(--primary-color);
		text-align: center;
		margin-bottom: 32rpx;
		padding: 16rpx 24rpx;
		background: rgba(139, 92, 246, 0.1);
		border-radius: 12rpx;
		border: 1rpx solid rgba(139, 92, 246, 0.2);
	}
	
	/* 深色主题下的验证目标 */
	.app-container.theme-dark .verify-target,
	.app-container.theme-purple .verify-target,
	.app-container.theme-blue .verify-target {
		background: rgba(139, 92, 246, 0.15);
		border-color: rgba(139, 92, 246, 0.3);
	}

	/* Markdown 渲染样式 */
	.markdown-content {
		line-height: 1.6;
		font-size: 28rpx;
	}

	/* Markdown 标题样式 */
	.markdown-content .md-h1 {
		font-size: 40rpx;
		font-weight: bold;
		margin: 32rpx 0 16rpx 0;
		color: #1f2937;
		border-bottom: 2rpx solid #e5e7eb;
		padding-bottom: 8rpx;
	}

	.markdown-content .md-h2 {
		font-size: 36rpx;
		font-weight: bold;
		margin: 28rpx 0 14rpx 0;
		color: #374151;
	}

	.markdown-content .md-h3 {
		font-size: 32rpx;
		font-weight: bold;
		margin: 24rpx 0 12rpx 0;
		color: #4b5563;
	}

	/* Markdown 段落样式 */
	.markdown-content .md-p {
		margin: 16rpx 0;
		line-height: 1.7;
	}

	/* Markdown 代码样式 */
	.markdown-content .code-block {
		background: #f8fafc;
		border: 1rpx solid #e2e8f0;
		border-radius: 8rpx;
		margin: 16rpx 0;
		overflow: hidden;
	}

	.markdown-content .code-lang {
		background: #e2e8f0;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		color: #64748b;
		border-bottom: 1rpx solid #cbd5e1;
	}

	.markdown-content .code-block pre {
		padding: 16rpx;
		margin: 0;
		overflow-x: auto;
		background: #f8fafc;
	}

	.markdown-content .code-block code {
		font-family: 'Courier New', Courier, monospace;
		font-size: 26rpx;
		line-height: 1.4;
		color: #1e293b;
	}

	.markdown-content .inline-code {
		background: #f1f5f9;
		color: #e11d48;
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
		font-family: 'Courier New', Courier, monospace;
		font-size: 26rpx;
	}

	/* Markdown 强调样式 */
	.markdown-content .md-bold {
		font-weight: bold;
		color: #1f2937;
	}

	.markdown-content .md-italic {
		font-style: italic;
		color: #374151;
	}

	.markdown-content .md-strikethrough {
		text-decoration: line-through;
		color: #6b7280;
	}

	/* Markdown 链接样式 */
	.markdown-content .md-link {
		color: #3b82f6;
		text-decoration: underline;
	}

	/* Markdown 列表样式 */
	.markdown-content .md-ul,
	.markdown-content .md-ol {
		margin: 16rpx 0;
		padding-left: 32rpx;
	}

	.markdown-content .md-li,
	.markdown-content .md-li-ordered {
		margin: 8rpx 0;
		line-height: 1.6;
	}

	/* Markdown 引用样式 */
	.markdown-content .md-blockquote {
		border-left: 6rpx solid #e5e7eb;
		padding-left: 20rpx;
		margin: 16rpx 0;
		color: #6b7280;
		font-style: italic;
		background: #f9fafb;
		padding: 16rpx 20rpx;
		border-radius: 0 8rpx 8rpx 0;
	}

	/* Markdown 分割线样式 */
	.markdown-content .md-hr {
		border: none;
		height: 2rpx;
		background: #e5e7eb;
		margin: 32rpx 0;
	}

	/* 深色主题下的Markdown样式 */
	.app-container.theme-dark .markdown-content .md-h1,
	.app-container.theme-purple .markdown-content .md-h1,
	.app-container.theme-blue .markdown-content .md-h1 {
		color: #f9fafb;
		border-bottom-color: #374151;
	}

	.app-container.theme-dark .markdown-content .md-h2,
	.app-container.theme-purple .markdown-content .md-h2,
	.app-container.theme-blue .markdown-content .md-h2 {
		color: #e5e7eb;
	}

	.app-container.theme-dark .markdown-content .md-h3,
	.app-container.theme-purple .markdown-content .md-h3,
	.app-container.theme-blue .markdown-content .md-h3 {
		color: #d1d5db;
	}

	.app-container.theme-dark .markdown-content .code-block,
	.app-container.theme-purple .markdown-content .code-block,
	.app-container.theme-blue .markdown-content .code-block {
		background: #1f2937;
		border-color: #374151;
	}

	.app-container.theme-dark .markdown-content .code-lang,
	.app-container.theme-purple .markdown-content .code-lang,
	.app-container.theme-blue .markdown-content .code-lang {
		background: #374151;
		color: #9ca3af;
		border-bottom-color: #4b5563;
	}

	.app-container.theme-dark .markdown-content .code-block pre,
	.app-container.theme-purple .markdown-content .code-block pre,
	.app-container.theme-blue .markdown-content .code-block pre {
		background: #1f2937;
	}

	.app-container.theme-dark .markdown-content .code-block code,
	.app-container.theme-purple .markdown-content .code-block code,
	.app-container.theme-blue .markdown-content .code-block code {
		color: #e5e7eb;
	}

	.app-container.theme-dark .markdown-content .inline-code,
	.app-container.theme-purple .markdown-content .inline-code,
	.app-container.theme-blue .markdown-content .inline-code {
		background: #374151;
		color: #fbbf24;
	}

	/* 文件上传预览区域样式 */
	.file-upload-preview {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 16rpx;
		margin: 16rpx 20rpx;
		padding: 16rpx 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		backdrop-filter: blur(10rpx);
	}

	.file-chips-container {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-bottom: 16rpx;
	}

	.file-chip {
		display: flex;
		align-items: center;
		background: #f8fafc;
		border: 1rpx solid #e2e8f0;
		border-radius: 20rpx;
		padding: 8rpx 12rpx;
		gap: 8rpx;
		max-width: 240rpx;
		transition: all 0.2s ease;
	}

	.file-chip:hover {
		background: #f1f5f9;
		transform: translateY(-1rpx);
	}

	.file-chip-icon {
		width: 24rpx;
		height: 24rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16rpx;
		font-weight: bold;
		flex-shrink: 0;
	}

	.file-chip-icon.pdf {
		background: #ef4444;
		color: white;
	}

	.file-chip-icon.image {
		background: #10b981;
		color: white;
	}

	.file-chip-icon.text {
		background: #3b82f6;
		color: white;
	}

	.file-chip-icon.document {
		background: #8b5cf6;
		color: white;
	}

	.file-chip-icon.other {
		background: #6b7280;
		color: white;
	}

	.file-chip-name {
		font-size: 24rpx;
		color: #374151;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
		min-width: 0;
	}

	.file-chip-close {
		width: 20rpx;
		height: 20rpx;
		background: rgba(107, 114, 128, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		padding: 0;
		flex-shrink: 0;
		transition: all 0.2s ease;
	}

	.file-chip-close .close-x {
		font-size: 16rpx;
		color: #6b7280;
		font-weight: bold;
		line-height: 1;
	}

	.file-chip-close:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.9);
	}

	.file-chip-close:active .close-x {
		color: #ef4444;
	}

	.file-actions-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 12rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.06);
	}

	.file-count-text {
		font-size: 24rpx;
		color: #6b7280;
		font-weight: 500;
	}

	.clear-all-files {
		background: rgba(239, 68, 68, 0.1);
		border: 1rpx solid rgba(239, 68, 68, 0.2);
		border-radius: 12rpx;
		padding: 8rpx 16rpx;
		transition: all 0.2s ease;
	}

	.clear-all-files .clear-text {
		font-size: 24rpx;
		color: #ef4444;
		font-weight: 500;
	}

	.clear-all-files:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.95);
	}

	/* 选中文件显示区域样式 */
	.selected-files-container {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		border: 2rpx solid rgba(209, 213, 219, 0.2);
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
	}
	
	.selected-files-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.files-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.files-icon {
		font-size: 32rpx;
		opacity: 0.8;
	}
	
	.files-count {
		font-size: 28rpx;
		font-weight: 600;
		color: #374151;
		opacity: 0.9;
	}
	
	.clear-files-btn {
		width: 56rpx;
		height: 56rpx;
		background: rgba(239, 68, 68, 0.1);
		color: #ef4444;
		border: 2rpx solid rgba(239, 68, 68, 0.2);
		border-radius: 50%;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}
	
	.clear-files-btn:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.95);
		border-color: rgba(239, 68, 68, 0.4);
	}
	
	.clear-icon {
		position: relative;
		z-index: 1;
	}
	
	.selected-files-list {
		white-space: nowrap;
		height: 180rpx;
	}
	
	.file-item {
		display: inline-block;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		padding: 20rpx;
		margin-right: 20rpx;
		border: 2rpx solid rgba(209, 213, 219, 0.15);
		min-width: 240rpx;
		width: 240rpx;
		vertical-align: top;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}
	
	.file-preview {
		position: relative;
		display: flex;
		justify-content: center;
		margin-bottom: 16rpx;
	}
	
	.file-icon {
		font-size: 48rpx;
		text-align: center;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
		transition: all 0.3s ease;
	}
	
	.file-type-pdf .file-icon { filter: hue-rotate(0deg) saturate(1.2); }
	.file-type-doc .file-icon { filter: hue-rotate(220deg) saturate(1.1); }
	.file-type-excel .file-icon { filter: hue-rotate(120deg) saturate(1.3); }
	.file-type-ppt .file-icon { filter: hue-rotate(30deg) saturate(1.2); }
	.file-type-image .file-icon { filter: hue-rotate(280deg) saturate(1.4); }
	.file-type-video .file-icon { filter: hue-rotate(260deg) saturate(1.2); }
	.file-type-audio .file-icon { filter: hue-rotate(310deg) saturate(1.3); }
	.file-type-archive .file-icon { filter: hue-rotate(40deg) saturate(1.1); }
	
	.file-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #667eea;
		color: white;
		font-size: 18rpx;
		font-weight: bold;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		min-width: 40rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}
	
	.file-info {
		text-align: center;
		margin-bottom: 16rpx;
	}
	
	.file-name {
		display: block;
		font-size: 26rpx;
		font-weight: 600;
		color: #374151;
		margin-bottom: 6rpx;
		line-height: 1.3;
		min-height: 34rpx;
	}
	
	.file-size {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
		font-weight: 500;
	}
	
	.file-actions {
		display: flex;
		justify-content: center;
	}
	
	.remove-file-btn {
		width: 40rpx;
		height: 40rpx;
		background: rgba(239, 68, 68, 0.1);
		color: #ef4444;
		border: 1rpx solid rgba(239, 68, 68, 0.2);
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}
	
	.remove-file-btn:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.9);
	}
	
	.remove-icon {
		position: relative;
		z-index: 1;
	}
	
	/* 深色主题下的文件上传预览样式 */
	.app-container.theme-dark .file-upload-preview,
	.app-container.theme-purple .file-upload-preview,
	.app-container.theme-blue .file-upload-preview {
		background: rgba(31, 41, 55, 0.95);
		border-color: rgba(75, 85, 99, 0.3);
	}

	.app-container.theme-dark .file-chip,
	.app-container.theme-purple .file-chip,
	.app-container.theme-blue .file-chip {
		background: rgba(17, 24, 39, 0.8);
		border-color: rgba(75, 85, 99, 0.3);
	}

	.app-container.theme-dark .file-chip:hover,
	.app-container.theme-purple .file-chip:hover,
	.app-container.theme-blue .file-chip:hover {
		background: rgba(31, 41, 55, 0.9);
	}

	.app-container.theme-dark .file-chip-name,
	.app-container.theme-purple .file-chip-name,
	.app-container.theme-blue .file-chip-name {
		color: #f3f4f6;
	}

	.app-container.theme-dark .file-chip-close,
	.app-container.theme-purple .file-chip-close,
	.app-container.theme-blue .file-chip-close {
		background: rgba(156, 163, 175, 0.2);
	}

	.app-container.theme-dark .file-chip-close .close-x,
	.app-container.theme-purple .file-chip-close .close-x,
	.app-container.theme-blue .file-chip-close .close-x {
		color: #d1d5db;
	}

	.app-container.theme-dark .file-actions-bar,
	.app-container.theme-purple .file-actions-bar,
	.app-container.theme-blue .file-actions-bar {
		border-top-color: rgba(75, 85, 99, 0.3);
	}

	.app-container.theme-dark .file-count-text,
	.app-container.theme-purple .file-count-text,
	.app-container.theme-blue .file-count-text {
		color: #d1d5db;
	}

	.app-container.theme-dark .clear-all-files,
	.app-container.theme-purple .clear-all-files,
	.app-container.theme-blue .clear-all-files {
		background: rgba(239, 68, 68, 0.15);
		border-color: rgba(239, 68, 68, 0.3);
	}
	
	/* 深色主题下的选中文件样式 */
	.app-container.theme-dark .selected-files-container,
	.app-container.theme-purple .selected-files-container,
	.app-container.theme-blue .selected-files-container {
		background: rgba(55, 65, 81, 0.95);
		border-color: rgba(75, 85, 99, 0.3);
	}
	
	.app-container.theme-dark .files-count,
	.app-container.theme-purple .files-count,
	.app-container.theme-blue .files-count {
		color: #f3f4f6;
	}
	
	.app-container.theme-dark .file-item,
	.app-container.theme-purple .file-item,
	.app-container.theme-blue .file-item {
		background: rgba(75, 85, 99, 0.9);
		border-color: rgba(107, 114, 128, 0.3);
	}
	
	.app-container.theme-dark .file-name,
	.app-container.theme-purple .file-name,
	.app-container.theme-blue .file-name {
		color: #f3f4f6;
	}
	
	.app-container.theme-dark .file-size,
	.app-container.theme-purple .file-size,
	.app-container.theme-blue .file-size {
		color: #d1d5db;
	}
	
	.app-container.theme-dark .file-badge,
	.app-container.theme-purple .file-badge,
	.app-container.theme-blue .file-badge {
		background: #4f46e5;
	}
	
	.app-container.theme-dark .file-name,
	.app-container.theme-purple .file-name,
	.app-container.theme-blue .file-name {
		color: #f3f4f6;
	}
	
	.app-container.theme-dark .file-size,
	.app-container.theme-purple .file-size,
	.app-container.theme-blue .file-size {
		color: #d1d5db;
	}

</style>
